Question

假设我有一个像：

这样的DOM

<body>
<div class="a" data="a"><!-- 1 -->
    <div>
        <div class="a" data="b"><!-- 2 -->
        </div>
    </div>
    <div class="a" data="c"><!-- 3 -->
        <div class="a" data="d"><!-- 4 -->
            <div class="a" data="e"><!-- 5 -->

            </div>
        </div>
        <div class="a" data="f"><!-- 6 -->
            <div class="a" data="g"><!-- 7 -->

            </div>
        </div>
    </div>
</div>
<div>
    <div class="a" data="h"><!-- 8 -->

    </div>
</div>
</body>

如何选择具有类a的匹配元素的顶级元素？

例如$('body').selector...应该选择1和8。 $('[data="a"]').selector...应选择2和3。 $('[data="c"]').selector...应选择4和6。请注意，html结构只是一个例子，它可以有任何其他结构。

Answer 1

做这样的事情的好方法（虽然有点棘手）是向后思考它。要查找（在您的示例中）1和8，您可以执行以下操作：

var oneAndEight = $('.a').filter(function() {
  return $(this).parents('.a').length === 0;
});

这是所有“.a”元素，没有其他“.a”元素更接近DOM根。要得到2和3，你需要在元素和根之间只找到一个“.a”。

概括来说，这是一个简单的插件：

$.atDepth = function(sel, depth) {
  return $(sel).filter(function() {
    return $(this).parents(sel).length == depth;
  });
});

获得1和8：

var oneAndEight = $.atDepth(".a", 0);

对于5和7：

var fiveAndSeven = $.atDepth(".a", 3);

我不认为这可以通过简单的选择器来完成，因为CSS选择器语法没有“任何不包括x”的机制。

编辑 - here is a jsbin;

Answer 2

这似乎是这样做的：

$(".a:not(.a .a)")

Answer 3

我通过添加自己的选择器来解决它：

$.fn.topLevel = function(sel) {
    var master = $(this);
  return master.find(sel).filter(function() {
    return $(this).parentsUntil(master,sel).length == 0;
  });
};

但我仍然认为还有更多棘手的解决方案。

Jquery选择顶级后代与类

3 个答案: