我有以下HTML代码：
<li>
<a class="meuble-tab" href="#">Meuble</a>
</li>
我需要实现以下目标：
<li class="active">
<a class="meuble-tab" href="#">Meuble</a>
</li>
使用jQuery，我已经可以获取到
$(".meuble-tab")
如何获取其父元素"li"并对其进行addClass("active")操作？
3个回答
11
试试这个：
$(".meuble-tab").parent("li").addClass("active");
请参考parent( [expr] )：
获取一个元素的直接父级。如果对一组元素调用，parent将返回它们各自唯一的直接父级元素集合。
您可以使用可选表达式来筛选元素。如果没有父级，则返回长度为0的jQuery对象。
- Andrew Hare
3
0
Complete Code :
===============
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("ul#unlist li").click(function(){
$("li").removeClass("tbg")
$(this).addClass("tbg");
});
});
</script>
<style>
.tbg{
background-color: green !important;
}
ul li{
display: inline;
padding:10px;
background-color:blue;
}
</style>
</head>
<body>
<ul id="unlist">
<li class="tbg"><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
<li><a href="#">four</a></li>
</ul>
</body>
</html>
- gnganapath
1
对于多个HTML页面的加载或刷新条件，请使用此不同的脚本。 - gnganapath
0
Complete Code :
===============
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("li").click(function () {
var id = $(this).attr("id");
$('#' + id).siblings().find(".active").removeClass("active");
// ^ you forgot this
$('#' + id).addClass("active");
localStorage.setItem("selectedolditem", id);
});
var selectedolditem = localStorage.getItem('selectedolditem');
if (selectedolditem != null) {
$('#' + selectedolditem).siblings().find(".active").removeClass("active");
// ^ you forgot this
$('#' + selectedolditem).addClass("active");
}
});
</script>
<style>
.active,.tbg{
background-color: green !important;
}
ul li{
display: inline;
padding:10px;
background-color:blue;
}
</style>
</head>
<body>
<ul id="unlist">
<ul id="unlist">
<li id="1" class="active"><a href="addcss.php">one</a></li>
<li id="2"><a href="addcss2.php">two</a></li>
<li id="3"><a href="addcss3.php">three</a></li>
<li id="4"><a href="addcss4.php">four</a></li>
</ul>
</body>
</html>
- gnganapath
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
$(".meuble-tab").parent(),get(0).addClass("active");- 我认为我的方法更简洁。 - Andrew Hare