Как выбрать последнего потомка внутри дерева с помощью jQuery?

Question

Предположим, у меня есть такая структура:

<div id="content">
    <div>
        <span>
            <b>
                <i>
                    <u>
                        <span>Price</span>
                    </u>
                </i>
            </b>
        </span>
    </div>
</div>

В этом случае количество тегов внутри div #content и какие они меня не знают. У меня есть доступ только к идентификатору content.

Как мне получить селектор для последнего диапазона, который содержит текст Цена ?

p.s. lastChild метод возвращает последнего потомка в выбранном селекторе, но не глубже!

Answer 1

Выберите все дочерние элементы #content с помощью селектора * и используйте .filter() для фильтрации элемента. В фильтре элементов обратного вызова нет дочерних элементов.

$("#content *").filter(function(){
  return $("*", this).length == 0;
});
// Or using ES6
$("#content *").filter((i,v) => $("*", v).length == 0);

var ele = $("#content *").filter((i,v) => $("*", v).length == 0);
console.log(ele[0].outerHTML);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
    <div>
        <span>
            <b>
                <i>
                    <u>
                        <span>Price</span>
                    </u>
                </i>
            </b>
        </span>
    </div>
</div>

Answer 2

Jquery Way - Вы можете настроить таргетинг на все промежутки $() и на последний отрезок, используя метод slice () .

$('#content span').slice(-1)[0];

Javascript way - Найдите все промежутки, используя querySelectorAll () . Вы получите NodeArray, вы можете преобразовать его в массив, используя Array.from () и slice () last элемент из него, который является последним промежутком.

Array.from(document.querySelectorAll('#content span')).slice(-1)[0]

Answer 3

Прежде всего давайте исправим ваш синтаксис.Вы не можете поставить <span> непосредственно в <u>.Вам нужен <li> узел.Также вы не можете / не должны помещать блочные элементы, такие как ul, внутри встроенных элементов (span, a, b, i ...).И даже <b> и <i> не рекомендуются, лучше использовать семантическую разметку, например <strong> или <em>.

Теперь ваша проблема.Я думаю, вам не нужно заботиться о том, чтобы быть последним узлом.Если вы знаете, что текст содержит «Цена», вы можете искать его следующим образом:

var selector = $('#content').find(":contains('Price')");
$(selector).addClass('highlighted');

.highlighted {
background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
    <div>
        <u>
          <li>
              <span>Price</span>
          </li>
        </u>
    </div>
</div>

Если это решение не соответствует вашим потребностям, чтобы получить последний узел, вы должны проверить всех их, есть ли у них дети или нет,Как только они этого не сделают, вы достигли своей цели.Но я должен сказать, что это решение, которое вы могли бы найти в SO. Выберите самого глубокого ребенка в jQuery

Answer 4

Вы можете использовать .find(): https://api.jquery.com/find/

Это будет рекурсивно искать ваш селектор, поэтому: $('#content').find('span') даст вам два пролета, один для первого вложенного диапазона и один для второго вложенного диапазона. Недостатком является то, что если у вас есть несколько пролетов, вам нужно найти правильный.

Если вы можете поместить идентификатор в последний, скажем, класс с именем 'target-class', то, как вы знаете, вы найдете правильный: $('#content').find('span.target-class');