JQuery - добавить класс CSS в список

У меня есть следующий HTML:

<li>
<a class="meuble-tab" href="#">Meuble</a>
</li>

мне нужно добиться следующего:

<li class="active">
<a class="meuble-tab" href="#">Meuble</a>
</li>

Используя Jquery, я нахожусь в точке, где я могу добраться до

$("Meuble язычок")

Как мне добраться до его родительского "li", чтобы сделать addClass("активный")?

Источник

3 ответа

Решение

Попробуй это:

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

Для справки, пожалуйста, смотрите parent ([expr]):

Получить прямой родительский элемент. Если вызывается для набора элементов, parent возвращает набор их уникальных прямых родительских элементов.

Вы можете использовать необязательное выражение для фильтрации элементов. Если родителя нет, возвращает объект jQuery длиной 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>
Источник 
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>
Источник
Другие вопросы по тегам