jquery：选择第一个子节点

Question

假设我有一棵具有以下结构的树：

<div>node level1
     <div>node level2
          <div>node level3...etc

在jQuery中是否有一种方法，如果单击div level1，只有level2的div响应？

意思是：

$('div').click(function(){
$('div').children(first div child).css('color','red');
})

感谢任何输入！

:: EDIT ::
大家好，感谢您的耐心和投入。我固执地解决了这个问题，并且成功了。我只需要找到一种方法来破解我的树结构，这一切都变得非常清楚。
我基本上想找到一种让超级鱼状树倒塌/展开的方法，而不会卡在我所看到的“li ul li”例子中，因为我觉得它们有点不透明。 / p>

this fiddle有我的解决方案。注意：我假设如果有0个孩子，它很可能是一个被遵循的链接。我确信我已经提出的结构，你的能干将能够解决这最后一步。

感谢所有帮助，我期待着任何反馈。
最后注意事项：这可以很容易地软编码以符合任何树形结构大小。确认子节点或节点被点击的while循环，允许连接和调用eval函数将能够在子节点中一直向下钻取并确保它们在主节点也被隐藏之前全部隐藏。

只是一个想法。

Answer 1

你可以这样做：

$('div').click(function(){
  $(this).children('div').css('color','red');
});

不要再次选择所有<div>元素，而是使用this并从那里执行.children()以获取直接子<div>元素。 Here's a quick example，请注意此示例，<div>最初需要color，否则它会级联...即使它实际上并未应用于3级元素。

Answer 2

这可能就是你要找的东西：

http://api.jquery.com/first-child-selector/

Answer 3

编辑.click()上下文：

在click事件中，您将使用this jQuery对象（这是已被单击的元素。因此，您可以使用.children()访问所有子元素（它只会返回直接的子项，所以只是你的场景中的项目级别2项目：

$('div').click(function(){
    $(this).children().css('color','red');
}

或者，如果您只想要第一个级别2项，则可以使用:first-child选择器：

$('div').click(function(){
    $(':first-child', this).css('color','red');
}

Answer 4

这是css选择器的问题，因为jquery使用它。

我认为您可以简单地为要选择的div定义一个类：

<div class="Level1">node level1
    <div class="Level2">node level2</div>
</div>

然后在jquery中选择它：

$('div.Level1').click(function(){
$(this).children('div.Level2').css('color','red');
})