如何在jQuery中选择单个元素?

I have a table structure that looks like:

我有一个这样的表格结构:

<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>

Using jQuery I am trying to select the DIV in the second cell of the third row. I tried the following (amongst other things):

使用jQuery，我尝试在第三行的第二个单元格中选择DIV。我试过以下方法:

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

What I get back is an array with a single element (the DIV I'm after) and I have to then access using d[0]. Why is jQuery returning a single element array, I thought using the selector above would return the DIV element directly?

我得到的是一个带有单个元素的数组(我要的是DIV)，然后我必须使用d[0]访问它。为什么jQuery返回一个元素数组，我认为使用上面的选择器会直接返回DIV元素?

@Shog9 - Duh...Ok a light just switched on in my brain, I get it now. Cheers.

@Shog9——嗯…好吧，我脑子里刚亮了一盏灯，我现在明白了。欢呼。

6 个解决方案

#1

jQuery always returns a set of elements. Sometimes, the set is empty. Sometimes, it contains only one element. The beauty of this is that you can write code to work the same way regardless of how many elements are matched:

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

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

Fun!

乐趣!

#2

If you prefer keeping a jQuery object, you may write instead:

如果您喜欢保存jQuery对象，您可以编写:

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

#3

If you find that you know you will only deal with a single element and that only one element will be returned, you can always select the zero index of the array.

如果您发现您只处理一个元素，并且只返回一个元素，那么您总是可以选择数组的0索引。

$("selector")[0].value

It's dirty and breaks the convention of jQuery in general... but you "could" do this.

它很脏，而且打破了jQuery的常规……但是你“可以”这么做。

#4

$("selector").eq(5)

$(“选择器”).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.

它只返回第5项的第一个jquery数组。即。，我可以在返回值上执行jquery函数。

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

在这里找到了答案:https://forum.jquery.com/topic/jquery类选择器-引用-个人-元素

#5

There are several options for doing this:

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

"Select the first of several Div elements in the below snippet and change it's color to pink"

“在下面的代码片段中选择第一个Div元素，并将其颜色改为粉红色”

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

div style = ' font - size: 9.0 pt; font - family:宋体;mso - ascii - font - family: tahoma; mso - hansi - font - family

Here we can select the first Div in the following ways:

在这里，我们可以通过以下方式选择第一个Div:

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

1)$(" div ")当代(). css(“颜色”、“粉红色”);2)$(" div:第一"). css(“颜色”、“粉红色”);3)$(" div:first-of-type”). css(“颜色”、“粉红色”);

Please note that 2 is a jQuery construct and not a native css construct and hence, can be slightly less performant.

请注意，2是一个jQuery结构，而不是一个本地的css结构，因此，它的性能可能会稍差一些。

#6

-1

To get div directly, try this

要直接获得div，请尝试以下操作

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

#1