JQuery - добавить класс CSS в список - PullRequest
Новая
       30

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

2 голосов
/ 01 августа 2009

У меня есть следующий 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 ("активный")?

Ответы [ 3 ]

10 голосов
/ 01 августа 2009

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

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

Для справки см. parent ([expr]) :

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

Вы можете использовать необязательное выражение для фильтрации элемент (ы). Если нет родителя, возвращает объект jQuery с длиной 0.

0 голосов
/ 10 августа 2015 
    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>
0 голосов
/ 05 августа 2015 
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>
...