Question

下面是我正在使用的方法的布局示例。我认为必须有一种更简单的方法来选择这样的东西。

$('div[aria-label=Story]:not(div[aria-label=Story] div[aria-label=Story])')

<div aria-label="Story">a
  <span></span>
  <p></p>
  <div>
    <div aria-label="Story">b
    </div>
  </div>
</div>
<div aria-label="Story">c
</div>

Answer 1

您可以删除至少一个重复项并将其替换为*，因为否定的主题已由div[aria-label=Story] 外部否定：

$('div[aria-label=Story]:not(div[aria-label=Story] *)')

...但是您仍然需要使用另一个div[aria-label=Story]来指定祖先，因为在复杂的选择器中无法复制另一个复合选择器而不复制您想要引用的复合选择器... < / p>
...除非你想更进一步并抽象选择器字符串本身，方法是将div[aria-label=Story]复合选择器存储在变量中并根据需要进行插值：

var sel = 'div[aria-label=Story]'; $(sel + ':not(' + sel + ' *)');

Answer 2

Javascript选择比CSS选择更复杂，因此一种方法是使用javascript循环遍历页面上的所有[aria-label="Story"]元素，检查每个元素是否包含至少一个[aria-label="Story"]子元素元件。

如果它不包含任何内容，则可以应用类.contains-no-story，表示此元素是[aria-label="Story"]的实例，该实例不包含其他内容。

工作示例：

var stories = [... document.querySelectorAll('div[aria-label="Story"]')];

stories.forEach(function(story){
    story.classList.add('contains-no-story');
    for (var i = 0; i < story.children.length; i++) {
        if (stories.indexOf(story.children[i]) > -1) {
            story.classList.remove('contains-no-story');
        }
    }
});

[aria-label="Story"] {
  margin: 12px;
  padding: 12px;
  color: rgb(255, 255, 255);
  background-color: rgb(255, 0, 0);
}

.contains-no-story {
  background-color: rgb(0, 0, 255);
}

<div aria-label="Story">I contain another <code>[aria-label="Story"]</code> element
<div aria-label="Story">I do not contain another <code>[aria-label="Story"]</code> element</div>
</div>

<div aria-label="Story">I do not contain another <code>[aria-label="Story"]</code> element</div>

NB 这超出了这个答案的范围，但是如果你使用ax选择器，那么CSS样式（包括任何祖先斧头选择器 {{1}只会是：

请参阅： http://rounin.co.uk/projects/axe/axe2.html

有没有更有效的方法来选择不包含另一个的div +属性？

2 个答案: