Question

如何构建一个不会在匹配时更深入遍历的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>

Answer 1

一种快速而肮脏的方法：

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

这不会选择'foo'的'foo'子级。

编辑：

如果您给外部div提供一个ID，则可以执行以下操作：

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

这将选择作为'#outer'的直接子代的'.foo'元素。

这比第一种方法快！

Answer 2

儿童选择器（“父母>儿童”）是进行此类工作的最佳实践。

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

 $(document).ready(function () {
            $('#btSelect').click(function () {
                $("#panel1 > .foo").css("border", "3px double red");
            });
        });

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<button id="btSelect" class="btn btn-success">Get First Level</button>
<br><br>
    <div id="panel1">
        <div class="foo">Menu 1</div>
        <div class="foo">Menu 2
            <div class="foo">Menu 2.1</div>
            <div class="foo">Menu 2.2
                <div class="foo">Menu 2.2.1</div>
                <div class="foo">Menu 2.2.2</div>
            </div>
            <div class="foo">Menu 2.3</div>
        </div>
        <div class="foo">Menu 3
            <div class="foo">Menu 3.1</div>
        </div>
        <div class="foo">Menu 4</div>
    </div>
</body>
</html>

如何构建一个jquery选择器，在匹配时停止遍历？

2 个答案: