Выберите N-й предыдущий брат в jQuery?

Question

Я пытаюсь настроить селектор 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-го ? Теперь я сделаю это?

Answer 1

Вы используете 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> в документе.

EDIT

Чтобы сделать что-то вроде «от второго к последнему», разумный способ сделать это будет выглядеть так:

var $ul = $('#mylist > li');
var $el = $ul.eq($ul.length-2);

Но вам, вероятно, следует проверить, чтобы длина-2 была не меньше 0.

Answer 2

Вы хотите 3-й из последних?

var $ul = $("ul li");
$ul.find(":eq(" + Math.max(0, $ul.length - 3) + ")");

Краткое объяснение: длина $ ul (который является объектом jQuery) - это то, сколько ли найдено. Так что вы можете использовать это вместе с селектором ": eq (n)", чтобы получить li с нужным индексом.

Я использовал Math.max на случай, если список был слишком коротким (менее 3 литов).

Это тоже будет работать, но, очевидно, это не лучший способ:

var $ul = $("ul li:last").prev().prev();

Answer 3

Команда jQuery добавила эту функцию в версии 1.9

Вы можете прочитать об этом на http://api.jquery.com/nth-last-child-selector/

Answer 4

alert($('ul li').eq(3).text());

Это предупредит текст третьего элемента списка.

Answer 5

Для третьего и двадцатого вы можете сделать ul li:eq(3) и ul li:eq(20).От второго до последнего вы можете что-то сделать с параметром nth-child equation, хотя я не уверен.