如何在 JQuery 中仅选择第一级子级 [关闭]

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，你可以使用这个：

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

然后，一旦您获得了所需的每个 .ch，您就可以遍历它们。

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

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

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

---

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

$('.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 3

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

$(".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 内部元素的.t 元素，然后获取第一个子元素.ch

jsFiddle

---

当然你也可以说：

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

|或|

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

当然，这两个都只会抓取第一个 .t，不管它是否是 more 的父母

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)，即在电流通过回路。