0

假设我有一个像这样的 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结构只是一个例子，它可以有任何其他结构。

4

3 回答 3

0

做这样的事情的一个好方法（虽然有点棘手）是向后考虑。要查找（在您的示例中）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”的机制。

编辑——这是一个 jsbin；

于 2013-03-29T22:34:00.360 回答
0

这似乎做到了：

$(".a:not(.a .a)")
于 2013-03-29T23:02:37.713 回答
0

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

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

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

于 2013-03-29T23:36:09.183 回答