Выбрать N-й предыдущий брат в jQuery?
-
06-07-2019 - |
Вопрос
Я пытаюсь настроить селектор jQuery, но не совсем понимаю, как мне его написать.
У меня есть неупорядоченный список, который выглядит примерно так:
<ul>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li class="last">something</li>
</ul>
Теперь я знаю, хочу ли я выбрать последнего дочернего элемента, я могу сделать это, используя «ul li.last» или «ul.li:last», но скажем, хочу ли я второго от последнего, третьего или 20-го?Сделал бы я это сейчас?
Решение
Ты используешь eq
:
$('ul li').eq(X);
Где X — это индекс нужного элемента, начинающийся с 0.Вы также можете использовать форма выбора:
$('ul li:eq(X)');
И вы также можете добиться аналогичного результата, используя nth-child
:
$('ul li:nth-child(X)');
В документации говорится о разнице между nth-child
и eq
:
Хотя :eq(index) соответствует только одному элементу, он соответствует более чем одному:По одному для каждого родителя с индексом.Множественно для каждого родителя с четным, нечетным или уравнением.Указанный индекс имеет один индекс, в отличие от :eq(), который начинается с нуля.
Итак, делая $('ul li').eq(19);
вы получите единственный 20-й соответствующий элемент запроса (поэтому, если в документе более одного списка, вы не получите «все 19-е дочерние элементы», в то время как $('ul li:nth-child(20)');
предоставит вам отдельный 20-й соответствующий элемент списка для каждого <ul>
в документе.
РЕДАКТИРОВАТЬ:
Чтобы сделать что-то вроде «предпоследнего», разумный способ сделать это будет выглядеть так:
var $ul = $('#mylist > li');
var $el = $ul.eq($ul.length-2);
Но вам, вероятно, следует проверить, чтобы убедиться, что length-2 не меньше 0.
Другие советы
Хочешь третий из последних? Р>
var $ul = $("ul li");
$ul.find(":eq(" + Math.max(0, $ul.length - 3) + ")");
Краткое объяснение: длина $ ul (который является объектом jQuery) - это количество найденных li. Таким образом, вы можете использовать это вместе с & Quot;: eq (n) & Quot; селектор, чтобы получить li по нужному индексу.
Я использовал Math.max на случай, если список был слишком коротким (менее 3 литов).
Это тоже будет работать, но это явно не лучший способ:
var $ul = $("ul li:last").prev().prev();
Для третьего и двадцатого вы можете использовать ul li: eq (3)
и ul li: eq (20)
. От второго до последнего вы можете что-нибудь сделать с nth-child
< Параметр аргумента уравнение
/ a>, хотя я не уверен.
alert($('ul li').eq(3).text());
Это предупредит текст третьего элемента списка.
Команда jQuery добавила эту функцию в версии 1.9
Вы можете прочитать об этом на http://api.jquery.com/nth -за ребенка-селектор / р>