3

我有以下 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”）？

4

3 回答 3

11

试试这个：

$(".meuble-tab").parent("li").addClass("active");

供参考，请参阅parent( [expr] )：

获取元素的直接父级。如果在一组元素上调用，则 parent 返回一组其唯一的直接父元素。

您可以使用可选表达式来过滤元素。如果没有父对象，则返回一个长度为 0 的 jQuery 对象。

于 2009-07-31T20:20:28.013 回答
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>
于 2015-08-05T09:40:24.813 回答
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>
于 2015-08-10T12:19:47.283 回答