jQuery子选择器表达式

Question

<div id="div">
    <div> <!-- first level -->
        <div> <!-- second level -->
            <div>1.1</div> <!-- third level -->
            <div>1.2</div>
        </div>
        <div>
            <div></div>
            <div>2.2</div>
        </div>
    </div>
</div>

选择器表达式是jQuery中用于选择元素的语法。以下是选择以下内容所需的jQuery选择器表达式：
1. 选择一级注释的div：$("div:first-child")
2. 选择二级注释的div：$("div:first-child > div:first-child")
3. 选择三级注释的div：$("div:first-child > div:first-child > div:first-child")

- A.N.M. Saiful Islam

---

请不要使用">div"作为选择器，因为HTML DOM标签是动态的。它可能是div，也可能是ul或li等。 - A.N.M. Saiful Islam

请务必通过点击答案旁边的复选标记来接受解决问题的答案，这将使您的问题更容易得到回答者的关注。 - Nick Craver

Answer 1

在这种情况下，请使用立即子选择器>：

• 第一级：
  • $("#div > div")
  • $("#div > *")（通用版本）
• 第二级：
  • $("#div > div > div")
  • $("#div > * > *")（通用版本）
• 第三级：
  • $("#div > div > div > div")
  • $("#div > * > * > *")（通用版本）

等效的通用版本是没有选择器的.children()，例如：

$("#div").children()
$("#div").children().children()
$("#div").children().children().children()

- Nick Craver

Answer 2

所有这些的关键是使用>（子代）选择器或children()方法。

第一层：

$("#div > div")...
$("#div").children("div")...

第二层：

$("#div > div > div")...
$("#div").children("div").children("div")...

第三层：

$("#div > div > div > div")...
$("#div").children("div").children("div").children("div")...

如果您对某个标签（例如div）不感兴趣，则可以不指定选择器给children()函数。例如，所有第二级元素：

$("#div").children().children()...

- cletus

Answer 3

与它们的CSS选择器完全相同。

根据您的新要求进行编辑：

#div > *
#div > * > *
#div > * > * > *

- Matti Virkkunen

Answer 4

1. $('#div > *') - 这将选择所有直接作为元素 #div 的后代的标签。如果不使用子选择器 >，则会选择在元素 #div 内的所有标签，而不仅仅是第一级。

2. $('#div > * > *') - 与#1的思路相同。

3. $('#div > * > * > *')

- wsanville

Answer 5

它们是正确的，但如果要选择特定的第一个项目，请使用以下内容;

first level : $("#div").children("div:first-child")

Second level: $("#div:first-child").children("div:first-child").children("div:first-child")

Third level: $("#div").children("div":first-child).children("div:first-child").children("div:first-child")

- spielersun