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

How to select only the first level children in JQuery

提问by M99

I have the following structure in my DOM and I would like to select only the first level children from a specified class. How to do this in JQuery?

我的 DOM 中有以下结构，我只想从指定的类中选择第一级子级。如何在 JQuery 中做到这一点？

Please note that I have nested divs with same css class.

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

My HTML:

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

What I need to get:When I find all elements with class 't' and iterate, I want to get the children with class 'ch' that are under (not the ones in the inner div with class 't').

我需要得到什么：当我找到所有类 't' 的元素并进行迭代时，我想得到类 'ch' 下的子元素（而不是类 't' 的内部 div 中的元素）。

Javascript

Javascript

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

Thanks for your help.

谢谢你的帮助。

回答by Sushanth --

You can use childrenselector

您可以使用children选择器

Something like

就像是

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

This is equivalent to

这相当于

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

And you can remove the eachloop from the code as the selector selects the elements you are looking for.

您可以each在选择器选择您要查找的元素时从代码中删除循环。

Edit

编辑

For First level you can use a combination of child selectorand parentsmethod

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

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

Check Fiddle

检查小提琴

回答by SpYk3HH

Playing guessing games here, but is this what you're looking for?

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

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

jsFiddle

js小提琴

---

---

Or this:

或这个：

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

It will filter to only get Elements of .tthat have inner elements of .tand then get the first child .ch

它将过滤以仅获取.t具有内部元素的元素，.t然后获取第一个子元素.ch

jsFiddle

js小提琴

---

---

Of course you could also say:

当然你也可以说：

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

|OR|

|或|

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

Of course, both of these would only grab the very first .t, regardless if it was a parent to more or not

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

回答by Karl-André Gagnon

If you want the top level .t, you can use this :

如果你想要顶级.t，你可以使用这个：

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

Then once you got every .chyou need, you can iterate through them.

然后，一旦你得到了.ch你需要的一切，你就可以遍历它们。

If you want to iterate through the .t, then you can get the children inside the loop :

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

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

Fiddle : http://jsfiddle.net/c68xR/

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

---

---

If you want to select every .tand every .chof the first lvl .t, that's what you want :

如果您想选择第一个 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');
    }
})

Fiddle : http://jsfiddle.net/c68xR/2/

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

回答by zakangelle

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

If you want to target the elements inside of .chelement, you can do something like this:

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

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

回答by jcsanyi

Assuming you really want to loop through each .telement, and find the children of each oneindependently - which the other answers seem to have missed - I think this is what you want:

假设你真的想通过每个回路.t元素，并找到孩子每一个独立-这在其他的答案似乎已经错过了-我想这是你想要什么：

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

For the sample HTML given in the original question, we'll loop through the each2 times - once for each .telement. The first time through, only the first .chelement will be selected, and the second time through, only the second .chelement will be selected.

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

children()is different from find()in that it only finds immediate (first-level) children of the element it's called on - in this case, $(this), which is the .tthat was found in the current pass through the loop.

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