如何构建一个jquery选择器来停止在match上进行更深层次的遍历？

我如何构建一个jquery选择器，它不会在匹配时遍历更深的内容？它不应选择具有相同选择器的任何子级

$(".foo").each(function(){}); //how to modify '.foo'?


<div>
  <div class="foo">
    <!--select this-->
  </div>
  <div class="foo">
    <!--select this-->
    <div class="foo">
      <!--do not select-->
    </div>
  </div>
</div>

$（“.foo”）.each（function（）{}）//如何修改“.foo”？

一种快速而肮脏的方法：

$('.foo').not('.foo .foo')

这不会选择“foo”的“foo”子级

编辑：

如果您为外部分区提供id，则可以执行以下操作：

$("#outer>.foo").each(function(){});

这将选择“#outer”的直接子元素“.foo”元素

这比第一种方法快

子选择器（“父>子”）是执行此类工作的最佳实践

子组合子（A>B）可以被认为是后代组合子（ab）的一种更具体的形式，因为它只选择第一级后代

$（文档）.ready（函数（）{
$（'#btSelect'）。单击（函数（）{
$（“#panel1>.foo”）.css（“边框”，“3px双红色”）；
});
});

上一级



菜单1
菜单2
菜单2.1
菜单2.2
菜单2.2.1
菜单2.2.2
菜单2.3
菜单3
菜单3.1
菜单4
$（'.foo:first'）
？好主意！只要我找不到任何更干净的解决方案，这就行了。也考虑到了这一点，这是行不通的，因为.foo类不一定是直接的兄弟，它也应该与“孙子”一起工作。波尔·巴克的解决方案就是这样。