Question

我有一个类似于表格的结构：

<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 - 噢...哦，我的脑中刚刚亮起一盏灯，现在我明白了。谢谢。

Answer 1

jQuery总是返回一组元素。有时候，这个集合是空的。有时候，它只包含一个元素。这个美妙之处在于，无论匹配了多少元素，您都可以编写同样的代码来处理它们：

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

好玩！

Answer 2

如果您更喜欢保留jQuery对象，则可以写成:

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

Answer 3

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

$("selector")[0].value

它很糟糕，并且违反了jQuery的常规...但是你“可以”这样做。

Answer 4

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

This returns a first class jquery array with just the 5th item. i.e.,I can do jquery functions on the return value.

Found the answer here: https://forum.jquery.com/topic/jquery-class-selectors-referencing-individual-elements

Answer 5

有几个选择来完成这个。

选择下面代码片段中的第一个 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构造，因此性能可能略低。

Answer 6

这在jQuery 3.4.1中有效：

$($(li)[0]).css(color,blue); $($(li)[0]).css（color，blue）;

Answer 7

获取div直接，尝试这个。

$divElement = $( #row3 td div );

友情链接