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颜色。如何获得li类，当我只有ul类时，以及如何用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>

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

$('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>

Answer 2

＆＃13;

$(document).ready(function(){
  $("ul.myClass li.active").closest("div").css("background-color", "blue");
});

＆＃13;

<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>

＆＃13;

Answer 3

首先，你的css已关闭 - 它应该是

<div style="background-color: red">

然后，（在jQuery中）：

$('ul.myClass li.active').css('background-color', 'blue');

JSFiddle

Answer 4

＆＃13;

if($(".myClass li").hasClass("active")){
  $("div").css("background","red");
}

＆＃13;

<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>

＆＃13;

Answer 5

使用vanilla JS

var divs = document.getElementsByTagName("div")

for (var i = 0; i < divs.length; i++) {
 // get all child nodes inside divs
 var children = divs[i].getElementsByTagName("*");
 
 for (var j = 0; j < children.length; j++){
  if(children[j].className === "active"){
    children[j].style.backgroundColor = 'blue';
  }
 }
 
}

<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控制<ul>标签内的<li>标签？

5 个答案: