Как получить n-й элемент jQuery

311

В jQuery $("...").get(3)возвращает третий элемент DOM. Какая функция возвращает 3-й элемент jQuery?

jquery Сэм Ли
источник

Ответы:

310

Почему бы сначала не просмотреть (короткую) страницу селекторов?

Вот оно: :eq()оператор. Он используется так же, как get(), но он возвращает объект jQuery.

Или вы можете использовать .eq()функцию тоже.

Dykam
источник
23
Разве это не должно быть .eq()вместо :eq()?
RubenGeert
15
Да, .eq()больше подходит для вопроса ОП. :eq()используется в строковом параметре to $, тогда .eq()как это метод существующего объекта jQuery.
mjswensen
55
Клянусь, я должен идти и искать это каждый . холост . время .
ivarni
3
@JoelWorsham Зависит от желаемого поведения. $('select').find('option').eq(n)будет в основном игнорировать группировку и получит все опции в целом. Если вы хотите, чтобы это для группы, что-то вроде этого необходимо:$('select').find('optgroup').each(function() { $(this).find('option').eq(n)...; })
Dykam
4
"Почему бы сначала не просмотреть (короткую) страницу селекторов?" - Потому что «эквалайзер» - очень плохое имя, и я регулярно пропускаю его, поскольку эквалайзер для меня означает сравнение ....
mmlac
309

Вы можете использовать : eq selector, например:

$("td:eq(2)").css("color", "red"); // gets the third td element

Или функция eq (int) :

$("td").eq(2).css("color", "red");

Также помните, что индексы начинаются с нуля.

CMS
источник
7
В качестве синонима вы также можете использовать :nth()селектор - не путать с:nth-child()
user123444555621
Лучше ответ и не редактируется через 3 года после свершившегося факта :)
Андрей
спасибо за то, что вы на самом деле объясняете, как использовать селектор / функцию
Джозеф Роджерс
49

если у вас есть контроль над запросом, который создает объект jQuery, используйте :eq()

$("div:eq(2)")

Если у вас нет контроля над ним (например, он передается из другой функции или чего-то еще), тогда используйте .eq()

var $thirdElement = $jqObj.eq(2);

Или, если вы хотите их раздел (скажем, третий, четвертый и пятый элементы), используйте .slice()

var $third4th5thElements = $jqObj.slice(2, 5);
nickf
источник
Искал кусочек, но не знал, как искать. Спасибо за то, что вы вышли за рамки первоначального вопроса.
Самик Р
4
Для людей, которые натыкаются на этот ответ, полезно отметить, что селектор n-го ребенка основан на 1, в то время как: eq или .eq () основаны на 0
Судханшу Мишра,
1
Вы должны использовать .eq()вместо того, чтобы на :eq()самом деле. Небольшое повышение производительности.
Qwerty
13

Я думаю, что вы можете использовать это 

$("ul li:nth-child(2)").append("<span> - 2nd!</span>");

Он находит второй li в каждом совпавшем ul и отмечает его.

JoenasE
источник
11

.eq () - Целое число, обозначающее позицию элемента на основе 0.

Пример:

Рассмотрим страницу с простым списком:

<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>

Мы можем применить этот метод к набору элементов списка:

$( "li" ).eq( 2 ).css( "background-color", "red" );

Для получения дополнительной информации: .eq ()

тилак
источник
3

Если у вас уже есть объект jquery в переменной, вы также можете просто обработать его как обычный индексированный массив без использования jquery:

var all_rows = $("tr");
for(var i=0; i < all_rows.length; i++){
   var row = all_rows[i];
   //additionally, you can use it again in a jquery selector
   $(row).css("background-color","black");
}

Хотя приведенный выше пример бесполезен, он показывает, как вы можете обрабатывать объекты, созданные в jquery, как индексированные массивы.

Au.Merci
источник
Правильно, и еще один (надеюсь, полезный) совет: если строка содержит список <select>элементов, и вы хотите, чтобы выбранный элемент комбинированного списка , используйте$(row).val();
Matt
2

Если я правильно понимаю ваш вопрос, вы всегда можете просто обернуть функцию get следующим образом:

var $someJqueryEl = $($('.myJqueryEls').get(3));
user1205577
источник
3
Это просто «трудный путь», и это то, что eq()дает вам бесплатно.
Caumons
1

Если вы хотите получить определенный элемент / узел или тег в цикле, например,

<p class="weekday" data-today="monday">Monday</p>
<p class="weekday" data-today="tuesday">Tuesday</p>
<p class="weekday" data-today="wednesday">Wednesday</p>
<p class="weekday" data-today="thursday">Thursday</p>

Итак, сверху выполняется цикл кода, и мы хотим, чтобы выбрано определенное поле, для этого мы должны использовать выборку jQuery, которая может выбрать только ожидающий элемент из цикла выше, поэтому код будет

$('.weekdays:eq(n)');

например

$('.weekdays:eq(0)');

как и другим способом

$('.weekday').find('p').first('.weekdays').next()/last()/prev();

но первый метод более эффективен, когда HTML <tag>имеет уникальное имя класса.

ПРИМЕЧАНИЕ. Второй метод используется, когда их нет в именах классов в целевом элементе или узле.

для более подробной информации следуйте https://api.jquery.com/eq/

Врушал Раут
источник
0

Для итераций использование селектора не имеет смысла:

var some = $( '...' );

for( i = some.length -1; i>=0; --i )
{
   // Have to transform in a jquery object again:
   //
   var item = $( some[ i ] );

   // use item at will
   // ...
}

источник
0

Живой пример для доступа и удаления N-го элемента с помощью jQuery:

<html>
<head></head>
<body>
    <script type="text/javascript" 
    src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $('li:eq(1)').hide();
      });
    </script>
    <ol>
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
    </ol>
</body>
</html>

Когда он запускается, в упорядоченном списке появляются два элемента: «Первый» и «Третий». Второй был спрятан.

Эрик Лещинский
источник
PS: отсчет начинается с 0; Первый - по индексу 0, Второй - по индексу 1 и т. Д.
KNU
0 
 $(function(){
            $(document).find('div').siblings().each(function(){
                var obj = $(this);
                obj.find('div').each(function(){
                    var obj1 = $(this);
                    if(!obj1.children().length > 0){
                        alert(obj1.html());
                    }
                });

            });
        });

<div id="2">
    <div>
        <div>
            <div>XYZ Pvt. Ltd.</div>
        </div>
    </div>
</div>
<div id="3">
    <div>
        <div>
            <div>ABC Pvt Ltd.</div>
        </div>
    </div>
</div>
Санджай Верма
источник
"$ (function () {" в начале осени я создал анонимную функцию, которая автоматически сработала. Внутри нее я нашел трех родительских элементов div, используя братьев и сестер. Затем я повторил все 3 родительских элемента div и проверил длину каждого дочернего элемента длины. Как я могу определить, является ли последний div или нет в родительском div. Теперь я оповещаю о последнем html div каждого 3 основного родительского div
Sanjay Verma
Вы можете редактировать свой ответ, вместо того, чтобы давать информацию в комментариях :)
T3 H40