Как получить последний дочерний node с jquery?
У меня около 4000 веб-сайтов, у всех есть немного другой навигационный html, но конечный ребенок node всегда основан на тексте node, и нет реальной однородности того, как выкладывается html.
как бы получить последний дочерний node для каждого из li или или div в родовом mannor на основе следующих примеров html
<!-- want to be able to get each span and its text -->
<ul id="nav">
<li><a href="#"><span>Menu Item</span></a></li>
<li><a href="#"><span>Menu Item</span></a></li>
<li><a href="#"><span>Menu Item</span></a></li>
</ul>
<!-- want to be able to get each a and its text -->
<ul id="nav">
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>
<!-- want to be able to get each a and its text -->
<div id="nav">
<div><a href="#">Menu Item</a></div>
<div><a href="#">Menu Item</a></div>
<div><a href="#">Menu Item</a></div>
</div>
<!-- want to be able to get each a and its text -->
<div id="nav">
<a href="#">Menu Item</a>
<a href="#">Menu Item</a>
<a href="#">Menu Item</a>
</div>
это лишь некоторые из способов, которыми nav реализованы на некоторых сайтах, обычно у них есть корневой элемент с идентификатором nav, а затем набор детей, который может иметь внуков и далее.
Я не хочу писать отдельный селектор для каждого из них, поэтому я пытался найти общий способ сделать каждый из первого дочернего элемента в #nav, который затем найдет последний дочерний элемент этого конкретного элемента, который содержал некоторый текст.
до сих пор мне удалось написать все, что требует настраиваемого селектора для каждого типа nav, поэтому я боюсь, что у меня нет кода для начала публикации.
Кто-нибудь знает, как они найдут этих конечных детей с jquery?
Ответы
Ответ 1
Самый простой способ с помощью одного оператора/селектора:
$("#nav").children().each(function(i, item) {
alert($(item).find(':not(:has(*))').text());
});
JSFiddle: http://jsfiddle.net/qUx4A/
Небольшое объяснение:
-
$( "# nav" ). children(). each() - обрабатывает тело для каждого элемента в элементе #nav (для каждого li, a, div....
/li > -
: имеет (*) - select элемент, который имеет любой дочерний элемент
- : not (: has (*)) - отрицательный от 2. (выберите элемент, у которого НЕ какой-либо дочерний элемент) - самый внутренний
- .text() - текстовое содержимое такого самого внутреннего элемента
Надеюсь, этого достаточно, я не уверен, что могу объяснить это более точно.:)
Ответ 2
Попробуйте следующее:
var container = $('#nav');
var children = container.children();
var element = children.eq(0);
while(children.length) {
children = children.children();
if (children.length)
element = children.eq(0);
}
var elements = container.find(element.get(0).tagName);
Он хранит самый глубокий ребенок в element
, а затем выбирает всех этих детей соответственно найденному tagName
. Он работает во всех ваших примерах. Это не удается, если у вас есть вложенный элемент того же типа.
Demo
Попробуйте перед покупкой.
Ответ 3
Вот что я придумал:
$('.nav').each(function(){
console.log('Nav '+$(this).index());
$(this).children().each(function(){
var $d = $(this);
while($d.children().length==1){
$d = $($d.children()[0]);
}
console.log($d.text());
console.log($d);
console.log('');
});
});
http://jsfiddle.net/ymjaG/
Ответ 4
Что-то вроде:
$("#nav").children(":last-child").text();
http://jsfiddle.net/RyanWalters/uhN94/
Ответ 5
Идентификаторы должны быть уникальными. Измените его на класс и выполните следующие действия:
$('.nav').children(':last-child').text()