JQuery - 将 css 类添加到列表答案

【问题标题】：JQuery - Add css class to ListJQuery - 将 css 类添加到列表
【发布时间】：2009-07-31 20:18:32
【问题描述】：

我有以下 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")？

【问题讨论】：

标签： jquery css list unordered

【解决方案1】：

试试这个：

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

参考请见parent( [expr] ):

获取元素的直接父级。如果在一组元素上调用，则为父级返回一组他们独特的直接父元素。

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

【讨论】：

对不起，它确实有效，我的代码中有语法错误！谢谢这很容易 - 发布问题很愚蠢:)
我刚试过这个。它确实有效。您是否在 $(document).ready() 中运行该代码位？
@redsquare - 否则我需要这样做：$(".meuble-tab").parent(),get(0).addClass("active"); - 我认为我的方法更简洁，

【解决方案2】：

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>

【讨论】：

对于多个 html 页面加载或刷新条件使用这个不同的脚本

【解决方案3】：

    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>

【讨论】：