jsFiddle

Question

我的DOM中有以下结构，我想只选择指定类中的第一级子节点。如何在JQuery中执行此操作？

请注意，我已经嵌套了具有相同css类的div。

我的HTML：

<div class="t">
    <div>title</div>
    <div class="ch">
        <input type="text name="input1" value="" id="i1">
    </div>
    <div class="t">
        <div>sub title</div>
        <div class="ch">
            <input type="text name="input2" value="" id="i2">
        </div>
    </div>
</div>

我需要得到什么： 当我找到所有带有't'类并且迭代的元素时，我想让那些属于'ch'类的孩子（不是内部div中带有't'类的那些）。

的Javascript

$(".t").each(function() {
    //Get the elements in '.ch' for $(this) and process.
});

感谢您的帮助。

Answer 1

您可以使用children选择器

像

这样的东西

$('.t').children('.ch')

这相当于

$('.t > .ch') // Child selector

您可以从代码中删除each循环，因为选择器会选择您要查找的元素。

修改

对于第一级，您可以结合使用child selector和parents方法

$('.t > .ch').filter(function() { return $(this).parents('.t').length === 1 })

<强> Check Fiddle

Answer 2

在这里玩猜谜游戏，但这正是你要找的吗？

$(".t").each(function(i) {
   var childrenCHOnly = $(this).children('.ch');
   /* Do work to childrenCHOnly */
});

jsFiddle

或者这个：

 $(".t").filter(function(i) { return $(this).find('.t').length; }).children('.ch').first();

它会过滤为只获取内部元素为.t的{{1}}元素，然后获取第一个子.t

jsFiddle

当然你也可以说：

.ch

|或|

$(".t").first().children(".ch").first().each(function(i) { ...

当然，这两个都只会抓住第一个$(".t > .ch").first().each(function(i) { ...，无论它是否是更多的父母

Answer 3

如果您想要顶级.t，可以使用：

$('.t').not('.t > .t').children('.ch')

然后，一旦你得到了你需要的每一个.ch，你就可以迭代它们。

如果你想遍历.t，那么你可以让孩子进入循环：

$('.t').not('.t > .t').each(function(){
    var ch = $(this).children('.ch')
})

小提琴：http://jsfiddle.net/c68xR/

如果您想选择第一个.t的每个.ch和每个.t，那就是您想要的：

$('.t').each(function(){
    var $this = $(this);
    $this.css('border', 'red 1px solid');
    if(!$this.is('.t > .t')){
        $this.children('.ch').css('border', 'blue 1px solid');
    }
})

小提琴：http://jsfiddle.net/c68xR/2/

Answer 4

$(".t").children(".ch").each(function() {
  // do stuff here
});

如果要定位.ch元素内的元素，可以执行以下操作：

$(".t").children(".ch").children().each(function() {
  // do stuff here
});

Answer 5

假设你真的想循环遍历每个.t元素，并独立找到每个的孩子 - 其他答案似乎错过了 - 我想这就是你想要的：

$(".t").each(function() {
    var childen = $(this).children('.ch');
});

对于原始问题中给出的示例HTML，我们将循环遍历each 2次 - 每个.t元素一次。第一次通过时，只会选择第一个.ch元素，第二次通过时，只会选择第二个.ch元素。

children()与find()的不同之处在于它只能找到它所调用的元素的直接（第一级）子元素 - 在本例中为$(this)，是当前通过循环的.t。

如何在JQuery中只选择第一级子代

5 个答案:

jsFiddle

jsFiddle