Как выбрать один элемент в 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 - Ага ... Хорошо, в моем мозгу только что зажегся свет, теперь я понял. Ваше здоровье.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 7
jQuery всегда возвращает набор элементов. Иногда набор пуст. Иногда он содержит только один элемент. Прелесть этого заключается в том, что вы можете написать код, который будет работать одинаково, независимо от того, сколько элементов сопоставляется:
$("selector").each(function()
{
this.style.backgroundColor = "red";
});
Веселье!
Если вы обнаружите, что знаете, что будете иметь дело только с одним элементом и что будет возвращен только один элемент, вы всегда можете выбрать нулевой индекс массива.
$("selector")[0].value
Это грязно и нарушает соглашение jQuery в целом ... но вы «могли» это сделать.
Я получаю сообщение «TypeError: $ (...) [0] .html не является функцией», в то время как .first () работает нормально.
Простой выбор индекса [0] массива вернет элемент DOM, но не объект jQuery, поэтому вы не сможете использовать для него такие методы jQuery, как .html ().
Если вы предпочитаете сохранить объект jQuery, вы можете вместо этого написать:
$("selector").first().val()
Это вернет массив, содержащий один элемент. На нем нельзя запускать события click. Решение CodeNinja, приведенное выше, возвращает один элемент не в массиве.
jQuery всегда работает с объектами, подобными массивам. Любое последующее действие относится ко всем элементам. Таким образом, все эти выражения дадут один и тот же результат: $("selector:first").click(), $("selector").first().click(), $($("selector")[0]).click(). См. Ответ Shog9.
$("selector").eq(5)
Это возвращает массив jquery первого класса только с 5-м элементом. то есть я могу выполнять функции jquery для возвращаемого значения.
Нашел ответ здесь: https://forum.jquery.com/topic/jquery-class-selectors-referencing-individual-elements
Неважно, это не отвечает на заданный вопрос, но я это искал. Не понял, пока не прочитал вопрос снова.
Чтобы получить div напрямую, попробуйте это
$divElement = $('#row3 td div');но если вы сделаете это в приведенном выше HTML, операция, например $('#row3 td div').css('background-color','red')будет применяться ко всем этим 3 <div>! (по крайней мере, с jQuery 2.1)
Для этого есть несколько вариантов:
"Выберите первый из нескольких элементов 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, и поэтому она может быть немного менее производительной.
Это работает в jQuery 3.4.1:
$($('li')[0]).css('color', 'blue');
Как это возможно выбранный ответ? Возник вопрос: «Как выбрать один элемент?» и ваш ответ был "вы получите их все!"