Question

假设以下DOM结构：

.grandparent
  .parent
    .child .successful
      .a
      .b
        .an-arbitrary-subtree
  .parent
    .child
      .a
      .b
        .a-different-arbitrary-subtree
  .adopted
    .child
      .a
      .b
        .another-arbitrary-subtree
          .with-different-parents
            .but-sometimes-common-css-classes .successful

如果我$('.grandparent').find('.successful')不出所料，我会回来[.child .successful, .but-sometimes-common-css-classes .successful]

有什么方法可以防止jQuery的find方法遍历.child节点下面？也许我可以自己重新实现$ .find（）并在节点上添加一个顶级类来暂停搜索（在本例中为.b）

为什么我要问？即使我们还没有Shadow Dom，我也想创建可以包含组件的组件（由匿名其他开发人员创建）而不用担心关于泄漏。聚合物还不够稳定。我更喜欢将jQuery选择器放在这些组件中，但是只能从子树的顶级节点开始，并且还没有办法将范围限制在树的深度。

Answer 1

很难做到这一点。如果你想在没有附加信息的情况下有合理的效率保证（例如，当你不感兴趣的子树可能是任意大的时候）那么你必须手动走DOM。

否则，您可以提取所有候选人并筛选出您不想要的人：

$('.grandparent')
    .find('.successful')
    .filter(function() { return !$(this).closest(".child").length; })

如果你选择后一种方式，请确保准确：

如果它们是.child，您是否要自行过滤掉.successful元素？使用closest可以做到这一点，但也许您不需要这样做。
.child以上.grandparent出现的可能性是多少？如果是这样，则需要对过滤器功能进行初始化，以便它不会拒绝所有候选匹配。

Answer 2

可以使用not()方法或:not()选择器或filter()。如果没有一些更现实的标准可以从这个例子开始工作，那就有点基础了。

$('.grandparent .a').not('.adopted .child .a').doSomething();

Answer 3

考虑使用each()，然后从返回的列表中抓取.child的第一个实例。类似的东西：

$('.parent').each(function() {
    return $(this).find('.successful').first();
});

Answer 4

您可以使用.filter()并在集合的每个项目上检查其父元素。

Answer 5

如果我理解正确，你想要达到所有＆＃34; .child＆＃34;拥有它的元素＆＃34; .success＆＃34;儿童元素。你可以通过搜索所有＆＃34; .success＆＃34;来做到这一点。您的＆＃34; .grandparent＆＃34;内的子元素元素，当你到达＆＃34; .success＆＃34;然后，元素搜索名为＆＃34; .child＆＃34;的父级。

这样的事情：

$('.grandparent').find('.successful').parents("child:first");

如果这不是您的要求，希望它能帮助您找到正确的解决方案：）

是否可以阻止jQuery.find（）在DOM树的某些节点下搜索？

5 个答案: