<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Title</title> | |
</head> | |
<body> | |
<ul id="ul"> | |
<li class="a abc abcd abcde ">1</li> | |
<li class="c a">2</li> | |
<li class="aa">3</li> | |
<li class="a c b r f">4</li> | |
<li class="b">5</li> | |
</ul> | |
<script> | |
function rua(ul,a) { | |
// rua为函数名称 ul为ul的id a为li里面的class类名 前面是父元素,后面子元素 | |
var oUL = document.getElementById(ul); | |
// 选定ul 并且声明ul | |
var arrLi = oUL.getElementsByTagName("*"); | |
// 选择ul中所有的(*代表所有)标签元素 | |
var arLII = []; | |
// 新建一个空数组 | |
for (var i = 0; i < arrLi.length; i++) { | |
// 循环arrLi中的所有元素 | |
var arrString = arrLi[i].className.split(" "); | |
// 将之前选中的元素类名转化为数组 并且新建在一个数组中 | |
for (j in arrString) { | |
// j代表遍历所有arrString中的元素 | |
if (arrString[j] == a) { | |
// 判断数组中是否有class为a的数值 | |
arLII.push(arrLi[i]) | |
// 如果有class为a的数值 则将该数值添加到空数值中 | |
} | |
} | |
} | |
return arLII; | |
// 返回数组arLII | |
} | |
for (var i = 0; i <rua("ul","a").length; i++) { | |
// 前面已经找到的数组,让这些数组所在的元素遍历一遍 | |
rua("ul","a")[i].style.background = "red"; | |
// 让这些选中的class中带有a的背景颜色改成红色 | |
} | |
</script> | |
</body> | |
</html> |
函数封装!
猜你喜欢
转载自blog.csdn.net/le_oop/article/details/80818980
今日推荐
周排行