javascript - 如何通过 JavaScript 控制 标签内的 标签？

Question

这是我的代码，

<div style="background-color:red;">
   <ul class="myClass">
      <li> CCD </li>
      <li class="active"> BCA </li>
      <li> ABC </li>
   </ul>
</div

我想在有 class="active"时自动更改 div 颜色。当我只有 ul 类时如何获取 li 类，以及如何使用 javascript 更改此 div 背景颜色？

Answer 1

您可以使用 jQuery :has()伪类选择器。

$('div:has(li.active)').css('background-color', 'green')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="backgroundColor='red'">
  <ul class="myClass">
    <li>CCD</li>
    <li class="active">BCA</li>
    <li>ABC</li>
  </ul>
</div>

---

或者使用filter() jQuery 中的方法。

$('div').filter(function() {
  return $('li.active', this).length;
}).css('background-color', 'green')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="backgroundColor='red'">
  <ul class="myClass">
    <li>CCD</li>
    <li class="active">BCA</li>
    <li>ABC</li>
  </ul>
</div>

---

使用纯 JavaScript，您可以执行类似的操作。

// select all elements and convert into an array
// for iterating over the elements
// for older browser use [].slice.call(....)
// for newer browser it supports forEach over 
// NodeList as well
Array.from(document.querySelectorAll('div'))
  // iterate over the elements
  .forEach(function(ele) {
    // check particular element exist inside
    if (ele.querySelector('li.active'))
      // if exist then add background color
      ele.style.backgroundColor = 'green';
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="backgroundColor='red'">
  <ul class="myClass">
    <li>CCD</li>
    <li class="active">BCA</li>
    <li>ABC</li>
  </ul>
</div>