3

这是我的标记：

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

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

请看看我的小提琴：

http://jsfiddle.net/rx8Jf/

怎么了？谢谢

4

7 回答 7

2

div您有两个具有相同班级的parent 。将您的 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

（演示）

于 2013-09-11T21:52:52.493 回答
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 的类小部件更改为单独的计数

演示

于 2013-09-11T21:55:29.340 回答
2

用这个：

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

演示在这里

于 2013-09-11T21:55:39.950 回答
1

使用>：

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

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

于 2013-09-11T21:54:22.957 回答
1

尝试

var panels = $("div.widget").children().find("div.panel");
alert(panels.length); // returns 2
于 2013-09-11T21:55:19.060 回答
1

它按预期工作，问题是它开始使用类小部件的每个 div，并且由于您有 2 个小部件类，每个小部件类有 2 个面板类，那么这就是为什么您计数为 4，这就是为什么它会提醒所有人

于 2013-09-11T21:55:20.213 回答
1

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

你说的直接孩子是什么意思..第一个？

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

这有帮助吗？:)

于 2013-09-11T21:57:41.973 回答