Javascript 如何在JQuery中仅选择第一级子级

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

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

我的HTML：

谢谢您的帮助。

您可以使用儿童选择器

差不多

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

这相当于

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

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

编辑

对于第一级，可以使用子选择器和父方法的组合

如果要将.ch元素中的元素作为目标，可以执行以下操作：

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

---

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

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

或者这个：

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

它将进行过滤，只获取内部元素为.t的.t元素，然后获取第一个子元素.ch

当然，你也可以说：

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

|或|

当然，这两种方法都只会获取最前面的.t，不管它是否是more的父级

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

一旦你得到了你需要的每一个.ch，你就可以遍历它们了

如果要遍历.t，则可以在循环中获得子循环：

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

小提琴：

如果要选择第一个lvl.t的every.t和every.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');
    }
})

---

Fiddle:

假设您真的想循环遍历每个.t元素，并独立地找到每个元素的子元素-其他答案似乎都没有找到-我想这就是您想要的：

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

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

---

---

children与find的不同之处在于，它只查找所调用元素的直接第一级子元素—在本例中，$this，即在当前通过循环中找到的.t。

能否详细说明为什么使用children方法会更好。t>.ch绝对不是不推荐使用的，它是一个有效的CSS选择器，可以提供给querySelectorAll，后者通常更快。这实际上并不是以OP的方式使用每种方式specified@Sushanth-我确认子选择器速度更快：我只想要第一级子级。不是所有的孩子。例如：如果你用类t取第一个div，我只需要第一个ch中的元素。这个答案是不正确的。它将匹配外部和内部元素。OP声明只匹配外部元素。这实际上不是OP使用每个第一级的方式，意味着不嵌套在其他子元素下。你的意思是，还是仅仅是第一个出现的问题？你真的需要停下来，弄清楚你需要什么，更新你的问题以清楚地解释它。我不知道在获取.ch元素时是否应该包含嵌套的.t元素。@M99这就是您想要的吗？选择every.t和top lvl.ch？…你知道，如果你很难表达应该选择哪些节点，你可以使用一些HTML注释来注释你要选择的节点。我不知道JSON是从哪里来的。你是说你正在创建一个JSON结构，一个由.ch元素的一些属性组成的字符串？+1，但我认为OP想要顶层的.t，这并不一定意味着存在嵌套的.t元素。关于这一点，问题并不十分清楚。为了排除那些有.t祖先的人，做$this.closest.t.length==0可能更安全。@CrazyTrain太正确了，这就是为什么我一直在做一些更新，尽管很难确切说出他/她想要什么？同意。如果可以保证始终存在嵌套，那么您的第一个解决方案将非常有效。我想读取每个具有类“t”的div，并创建JSON，其中的元素作为更像树的层次结构。在div中看到的嵌套也将在JSON中。谢谢。@M99好的，你看到我的最新更新了吗，我添加了一个新的示例，可能适合吗？你正确理解了这个问题，但是$this.children'.ch'将给所有的子级，甚至是嵌套div下的子级，并带有clss“t”。@M99:是哪一个。。。他正确理解了这个问题，或者您不希望嵌套的.t元素中包含.ch元素？@m99不，children只获得直接的子元素。所以当each位于第一个.t时，它只会得到第一个.ch。当每个都到了第二个。t，它会得到第二个。ch，因为它是这个的第一级子。t。好吧，我给+1这个和其他每个答案。如果有人发布了一个用Clojure编写的斐波那契函数，我可能也会投赞成票。看起来你比我们其他人更了解提问者的目标。干得好：@FrédéricHamidi，不得不承认，这很难：谢谢！

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

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

$('.t').not('.t > .t').each(function(){
    var ch = $(this).children('.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');
    }
})

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