Question

作为CSS选择器学习的一部分，我遇到了这个问题。我试图根据兄弟元素的存在选择一个元素。所以，如果我必须引用一个例子，

<div class = "parentDiv">
  <div class = "abc">
    <span>Note</span>
  </div>
  <div class = "abd">
    <span><a>testLink</a></span>
  </div>
</div>
<div class = "parentDiv">
  <div class = "abc">
    <span>Note2</span>
  </div>
  <div class = "abd">
    <span>te</span>
  </div>
</div>

对于上面的示例，我试图选择类.abc中的所有span元素，如果其兄弟.abd具有a标记

我尝试的是document.querySelectorAll('.parentDiv > .abc span ~ .abd span a');似乎没有用......任何想法我可能做错了

DEMO

Answer 1

<强>更新

这是使用纯JavaScript的替代方法：

＆＃13;

var selectors = document.querySelectorAll('.abd span a');

if (selectors) {
  selectors.forEach(function(selector) {
    selector.style.backgroundColor = 'yellow';
    selector = selector.parentNode.parentNode.parentNode;
    elements = selector.querySelectorAll('.abc span');
    if (elements) {
      elements.forEach(function(element) {
        element.style.backgroundColor = 'red';
      });
      console.log('.abc span: ' + elements.length);
    }
  });

  console.log('.abd span a: ' + selectors.length);
}

＆＃13;

<div class="parentDiv">
  <div class="abc">
    <span>Class> abc, tag> span: 1.0</span><br>
    <div>Class> abc, tag> div: 1.0</div>
    <span>Class> abc, tag> span: 1.1</span><br>
    <span>Class> abc, tag> span: 1.2</span><br>
    <div>Class> abc, tag> div: 1.1</div>
    <div>Class> abc, tag> div: 1.2</div>
  </div>
  <div class="abd">
    <span><a>Class> abd, tag> span a : 1.0 </a></span>
  </div>
</div>
<div class="parentDiv">
  <div class="abc">
    <span>Class> abc, tag> span: 2.0</span><br>
    <span>Class> abc, tag> span: 2.1</span><br>
    <span>Class> abc, tag> span: 1.2</span><br>
  </div>
  <div class="abd">
    <span>class> abd, tag> span: 2.0</span>
  </div>
  <div class="parentDiv">
    <div class="abc">
      <span>Class> abc: 3.0</span>
    </div>
    <div class="abd">
      <span><a>Class> abd, tag> span a : 3.0</a></span>
    </div>
  </div>

  <div class="parentDiv">
    <div class="abc">
      <span>Class> abc, tag> span: 4.0</span>
    </div>
    <div class="abd">
      <span>Class> abd, tag> span: 4.0</span>
    </div>
    <div class="abc">
      <span>Class> abc, tag> span: 4.1</span><br>
      <span>Class> abc, tag> span: 4.2</span><br>
      <span>Class> abc, tag> span: 4.3</span><br>
    </div>
  </div>

＆＃13;

Answer 2

仅使用CSS选择器（yet）无法完成此操作。

~选择器选择DOM树中同一级别的元素。您的a元素不是您span的直接兄弟，这就是您的选择器无法返回任何结果的原因。

//What you'll want to do, is first select all instances of links:
var links = document.querySelectorAll('.parentDiv > .abd span a');

//Let's also create an empty array for matches:
var s = [];

//Then iterate over our matches:
Array.prototype.forEach.call(links, findSiblings);

function findSiblings(link){
    //Here, we can traverse back up to .parentDiv:
    var parent = link.parentElement.parentElement.parentElement;
    //Now, we have a only '.parentDiv's that contain '>.abd span a'. 
    //Let's run another query on that element to find any spans contained in '.abc':
    var spans = parent.querySelectorAll('.abc span');
    //Now, we have a new collection. Let's push each to our array:
    Array.prototype.forEach.call(spans, function(element){
        s.push(element)
    });
}

//Now, we have all the matches in our s-array:
alert(s.length);

演示+代码的更紧凑版本：https://jsfiddle.net/p6nz011p/6/

或者，如果你正在使用jQuery，你可以这样做：

var s = $('.parentDiv:has(>.abd span a) >.abc span');
alert(s.length);

请注意，一旦浏览器支持CSS Selectors Level 4 :has() selector，您也可以在querySelectorAll()中使用此选择器而不使用jQuery。

Answer 3

波浪号组合器仅选择操作数是否是同一父级的子级。它们必须处于同一水平。 MDN reference。

基于兄弟内容存在的CSS选择

3 个答案: