2013-05-15 2 views
4

Предположим, мы имеем следующую разметку:найти ближайший родительский класс, который имеет

<div class="hello"> 
    <p> 
    <a href="#"><span id="start">Start</span></a> 
    </p> 
</div> 

Есть ли способ, чтобы найти ближайший элемент к $('#start'), который имеет атрибут класса, восходя дерево DOM?

ПОЯСНЕНИЯ: я на самом деле нужно, чтобы получить строку, содержащую полный путь от $ («# старт») до $, который не будет содержать имена тегов всех элементов до Так на основе разметки (привет). выше - это выведет: 'пролет ар .hello'

Вы можете получить имя элемента тега с element.prop('tagName')

ответ

8

Если вы хотите ближайший элемент, включая тех, которые вы начали использовать, используйте .closest:

$('#start').closest('[class]'); 

Если вы хотите исключить начальный элемент, используйте:

$('#start').parents('[class]').first(); 

Чтобы получить полный путь согласования, попробуйте следующее:

var path = []; 
var el = document.getElementById('start'); 
while (el) { 
    if (el.className) { 
     path.push('.' + el.className); 
     break; 
    } else { 
     path.push(el.tagName); 
    } 
    el = el.parentNode; 
} 
var ancestors = path.join(' '); 

См http://jsfiddle.net/alnitak/EZWNR/

Я использовал родной JS, потому что jQuery не предоставляет AFAIK простой метод для выбора элемента и каждого из его предков.

+0

Спасибо, кучи! Именно то, что мне нужно. – YemSalat

10

насчет

$('#start').closest("[class]"); 
+0

Спасибо! Упрощенный, но мне действительно нужно что-то другое (я обновил вопрос) извините за это – YemSalat

4

Вы можете получить строку, содержащую имена родительских узлов, пока вы сталкиваетесь с одним с классом с помощью JQuery-х parents(): Demo

var path = 'span '; 
$('#start').parents().each(function() { 
    if($(this).is('[class]')) { 
     path += '.' + this.className + ' '; 
     return false; // break 
    } 
    else { 
     path += this.nodeName + ' '; 
    } 
}); 
console.log(path); 

Да, вы можете сделать:

$('#start').closest("[class]"); 
+0

Спасибо за jQuery soluton! – YemSalat

+0

Добро пожаловать. :) – techfoobar

Смежные вопросы