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选择器表达式是什么：
1. div由第一级评论 2.由第二级评论的div 3.由第三级

评论的div

Answer 1

在这种情况下使用直接子选择器>：

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

等效通用名称.children()也没有选择器，例如：

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

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()...

Answer 3

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

根据您的新要求编辑：

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

Answer 4

$('#div > *') - 这将选择所有与元素#div直接相关的标记。如果不使用子选择器>，您将获得元素#div中的所有标记，而不仅仅是第一级。
$('#div > * > *') - 与＃1相同的想法
$('#div > * > * > *')

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

jQuery子选择器表达式

5 个答案: