<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
ul {
list-style-type: none;
cursor: pointer;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function () {
$("#three").click(function () {
// 获取某个li的下一个兄弟元素
$(this).next("li").css("backgroundColor","yellowgreen");
// 获取某个li的前一个兄弟元素
$(this).prev("li").css("backgroundColor","greenyellow");
// 获取某个li的后面的所有的兄弟元素
$(this).nextAll("li").css("backgroundColor","red");
// 获取某个li的前面的所有的兄弟元素
$(this).prevAll("li").css("backgroundColor","red");
// 获取当前的li的所有的兄弟元素
$(this).siblings("li").css("backgroundColor","gray");
});
});
</script>
</head>
<body>
<ul id="uu">
<li>凤姐</li>
<li>芙蓉姐姐</li>
<li id="three">犀利哥</li>
<li>大力哥</li>
<li>小月月</li>
<li>小胖</li>
<li>小明</li>
<li>小红</li>
</ul>
</body>
</html>jQuery操作兄弟元素
猜你喜欢
转载自blog.csdn.net/qq_39339179/article/details/130573807
今日推荐
周排行