[英]How to get control in <li> tag inside <ul> tag by JavaScript?
This is my code, 这是我的代码
<div style="background-color:red;">
<ul class="myClass">
<li> CCD </li>
<li class="active"> BCA </li>
<li> ABC </li>
</ul>
</div
I want to change div color automatically when there is class="active". 我想在有class =“ active”时自动更改div颜色。 How to get the li class, when I only have class for ul, and how to change this div background color with javascript?
如何获得li类,当我只有ul类时,以及如何使用javascript更改此div背景颜色?
You can use jQuery :has()
pseudo-class selector. 您可以使用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>
Or use filter()
method in jQuery. 或在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>
With pure JavaScript you can do something like this. 使用纯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>
$(document).ready(function(){ $("ul.myClass li.active").closest("div").css("background-color", "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>
if($(".myClass li").hasClass("active")){ $("div").css("background","red"); }
<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>
Using vanilla JS
使用
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.