如何在 jQuery 中选择单个元素？答案

【问题标题】：How do I select a single element in jQuery?如何在 jQuery 中选择单个元素？
【发布时间】：2008-11-21 01:10:52
【问题描述】：

我的表结构如下：

<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 - Duh...好吧，我脑子里的灯刚刚亮了，我现在明白了。干杯。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

如果你更喜欢保留一个 jQuery 对象，你可以改为：

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

【讨论】：

这将返回一个包含单个元素的数组。您不能在其上触发 click 事件。上面的 CodeNinja 解决方案返回不在数组中的单个元素。
jQuery 总是适用于类似数组的对象。任何后续操作都涉及所有元素。所以所有这些表达式都会产生相同的结果：$("selector:first").click()、$("selector").first().click()、$($("selector")[0]).click()。见 Shog9 的回答。

【解决方案2】：

jQuery 总是返回一组元素。有时，集合是空的。有时，它只包含一个元素。这样做的好处在于，无论匹配多少元素，您都可以编写代码以相同的方式工作：

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

好玩！

【讨论】：

这怎么可能是选定的答案？问题是“如何选择单个元素？”而你的回答是“你得到了所有这些！”

【解决方案3】：

如果你发现你知道你只会处理一个元素并且只返回一个元素，你总是可以选择数组的零索引。

$("selector")[0].value

这很脏，而且总体上打破了 jQuery 的惯例......但你“可以”这样做。

【讨论】：

我收到“TypeError: $(...)[0].html is not a function”，而 .first() 工作正常。
只选择数组的 [0] 索引将返回一个 DOM 元素而不是 jQuery 对象，因此您将无法在其上使用 .html() 之类的 jQuery 方法。

【解决方案4】：

$("选择器").eq(5)

这将返回一个只有第 5 项的第一类 jquery 数组。即，我可以对返回值执行 jquery 函数。

在这里找到答案： https://forum.jquery.com/topic/jquery-class-selectors-referencing-individual-elements

【讨论】：

没关系，这不能回答发布的问题，但我正在寻找这个。直到我再次阅读问题时才意识到。

【解决方案5】：

有几种方法可以做到这一点：

“在下面的 sn-p 中选择几个 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 构造，因此性能可能会稍差。

【讨论】：

【解决方案6】：

这适用于 jQuery 3.4.1：

$($('li')[0]).css('color', 'blue');

【讨论】：

【解决方案7】：

直接获取div，试试这个

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

【讨论】：

但如果您要在上述 HTML 上执行此操作，例如$('#row3 td div').css('background-color','red') 将应用于所有这 3 个<div>s！（至少使用 jQuery 2.1）