Question

这是我的标记：

<div class=widget>
    <div class=panel>panel1</div>
    <div class=panel>panel2
        <div class=widget>
            <div class=panel>panel1</div>
            <div class=panel>panel2</div>
        </div>
    </div>
</div>

我试图只选择类名为panel的DIRECT（第一级？）孩子，不幸的是我总是得到嵌套元素（4而不是2）。

请看看我的小提琴：

http://jsfiddle.net/rx8Jf/

出了什么问题？感谢

Answer 1

您有两个具有相同类的父div个。将HTML更改为此以获得所需的行为：

<div class=widget1>
    <div class=panel>panel1</div>
    <div class=panel>panel2
        <div class=widget2>
            <div class=panel>panel1</div>
            <div class=panel>panel2</div>
        </div>
    </div>
</div>

你的剧本：

var panels = $("div.widget1 > .panel");
alert(panels.length); // returns 2

var panels = $("div.widget2").children(".panel");
alert(panels.length); // returns 2

（demo）

Answer 2

你有多个父类div与类小部件。但是，例如，您可以尝试使用类窗口小部件

选择第一个div

var panels = $("div.widget:first > .panel");
alert(panels.length); // returns 2

var panels = $("div.widget:first").children(" >.panel");
alert(panels.length); // returns 2

您可以将第二个div的类窗口小部件更改为单独计数

DEMO

Answer 3

使用此：

var panels = $("div.widget > div.panel:first-child");

演示here

Answer 4

使用>：

$("div.widget").find(" > .panel:first-child");

您的div具有相同的类，因此将返回所有元素。

Answer 5

尝试

var panels = $("div.widget").children().find("div.panel");
alert(panels.length); // returns 2

Answer 6

它正在按预期工作，问题是它使用类小部件来获取每个div，并且因为你有2个小部件类，每个类有2个小组类，那么这就是为什么你得到4的数量，这就是为什么它会发出警报所有这些

Answer 7

我不明白..你想要得到什么 - 最后一个孩子还是第一个孩子？

DIRECT孩子是什么意思......第一个？

$("div.widget .panel:first");
   // OR
   $(".widget .panel").find("widget")

这有用吗？：）

jQuery子选择器未按预期工作

7 个答案:

演示here