-4

我的 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.
});

谢谢你的帮助。

4

5 回答 5

8

您可以使用children选择器

就像是

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

这相当于

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

您可以each从选择器选择所需的元素时从代码中删除循环。

编辑

对于第一级，您可以使用child selectorandparents方法的组合

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

检查小提琴

于 2013-06-28T17:32:52.880 回答
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每一个，这就是您想要的：.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/

于 2013-06-28T17:47:00.493 回答
1

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

$(".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，不管它是否是更多的父母

于 2013-06-28T17:34:45.087 回答
0 
$(".t").children(".ch").each(function() {
  // do stuff here
});

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

$(".t").children(".ch").children().each(function() {
  // do stuff here
});
于 2013-06-28T17:33:22.883 回答
-1

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

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

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

children()与它的不同之处find()在于它只找到它被调用的元素的直接（第一级）子元素 - 在这种情况下，$(this)它是.t在当前通过循环中找到的元素。

于 2013-06-28T17:52:07.783 回答