Как выбрать один элемент в jQuery?

У меня есть структура таблицы, которая выглядит так:

<table>
 <tr id="row1">
   <td>
     <div>row 1 content1</div>
   </td>
   <td>
     <div>row 1 content2</div>
   </td>
   <td>
     <div>row 1 content3</div>
   </td>
 </tr>
 <tr id="row2">
   <td>
     <div>row 2 content1</div>
   </td>
   <td>
     <div>row 2 content2</div>
   </td>
   <td>
     <div>row 2 content3</div>
   </td>
 </tr>
 <tr id="row3">
   <td>
     <div>row 3 content1</div>
   </td>
   <td>
     <div>row 3 content2</div>
   </td>
   <td>
     <div>row 3 content3</div>
   </td>
 </tr>
</table>

Используя jQuery, я пытаюсь выбрать DIV во второй ячейке третьей строки. Я пробовал следующее (между прочим):

var d = $('#row3').children(':eq(1)').children(':eq(0)');

То, что я получаю, это массив с одним элементом (DIV, которому я нужен), и я должен затем получить доступ, используя d [0]. Почему jQuery возвращает один элементный массив, я думал, что использование селектора выше вернет элемент DIV напрямую?

@Shog9 - Дух... Ок, свет только что включился в моем мозгу, я понял это сейчас. Приветствия.

Ответы

Ответ 1

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

$("selector").each(function()
{
   this.style.backgroundColor = "red";
});

Fun!

Ответ 2

Если вы предпочитаете хранить объект jQuery, вы можете написать вместо этого:

$("selector").first().val()

Ответ 3

Если вы обнаружите, что знаете, что будете иметь дело только с одним элементом и что будет возвращен только один элемент, вы всегда можете выбрать нулевой индекс массива.

$("selector")[0].value

Он грязный и нарушает соглашение jQuery в целом... но вы "можете" сделать это.

Ответ 4

$( "селектор" ). Экв (5)

Возвращает массив jquery первого класса с только 5-м элементом. то есть я могу выполнять функции jquery по возвращаемому значению.

Нашел ответ здесь: https://forum.jquery.com/topic/jquery-class-selectors-referencing-individual-elements

Ответ 5

Чтобы получить div напрямую, попробуйте

$divElement = $('#row3 td div');

Ответ 6

Для этого есть несколько вариантов:

"Выберите первый из нескольких элементов Div в приведенном ниже фрагменте и измените цвет на розовый.

<div>Div 1</div> <div class="highlight">Div 2</div> <div id="third">Div 3</div> <div class="highlight">Div 4</div>

Здесь мы можем выбрать первое Div следующим образом:

1) $("div").first().css("color","pink");
2) $("div:first").css("color","pink");
3) $("div:first-of-type").css("color","pink");

Обратите внимание, что 2 - это конструкция jQuery, а не встроенная конструкция css и, следовательно, может быть немного менее эффективной.