Как получить последний дочерний 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/

Ответ 5

Идентификаторы должны быть уникальными. Измените его на класс и выполните следующие действия:

$('.nav').children(':last-child').text()