jQuery parent (). addClass () не работает со скрытыми элементами

Question

Я пытаюсь использовать

jQuery("#element-id").parent().addClass('some-class');

У меня есть что-то вроде структуры:

<div class="tab-container user-dash-tabs">
    <div class="tabs1">
        <ul class="shadetabs" id="countrytabs">
            <li class="poll"><a id="pillow-pack" rel="country2" href="javascript:;" class="selected"></a></li>
            <li class="bott"><a href="javascript:;" class="" id="bottles" rel="country1"></a></li>
        </ul>
        <div class="cl"></div>
    </div>
    <input type="hidden" class="input-search" value="123" id="lubepack" name="lubepack">
    <p></p>
    <div class="cl"></div>

    <div class="tabcontent tab-content" id="country1" style="display: none;">
        <ul class="left-tab">
            <li title="water based" class="  add"><a class="  tab-pic7" id="tab-pic7-b" title="water based" href="javascript:;">&nbsp;</a></li>
            <li title="silicone based"><a class="  tab-pic8" id="tab-pic8-b" title="silicon based" href="javascript:;">&nbsp;</a></li>
            <li title="arousal"><a class="  tab-pic9" id="tab-pic9-b" href="javascript:;">&nbsp;</a></li>
            <li title="flavored"><a class="  tab-pic10" id="tab-pic10-b" href="javascript:;">&nbsp;</a></li>
            <li title="organic"><a class="  tab-pic11" id="tab-pic11-b" href="javascript:;">&nbsp;</a></li>
            <li title="desensitizing"><a class="  tab-pic12" id="tab-pic12-b" href="javascript:;">&nbsp;</a></li>
            <div class="cl"></div>
        </ul>
        <div class="cl"></div>
    </div>
    <div class="tabcontent tab-content" id="country2" style="display: block;">
        <ul class="left-tab">
            <li class=" " title="water based"><a class="  tab-pic7" id="tab-pic7-p" title="water based" href="javascript:;">&nbsp;</a></li>
            <li title="silicone based"><a class="  tab-pic8" id="tab-pic8-p" title="silicon based" href="javascript:;">&nbsp;</a></li>
            <li title="arousal"><a class="  tab-pic9" id="tab-pic9-p" title="" href="javascript:;">&nbsp;</a></li>
            <li title="flavored"><a id="tab-pic10-p" class="  tab-pic10" href="javascript:;">&nbsp;</a></li>
            <li title="organic"><a id="tab-pic11-p" class="  tab-pic11" href="javascript:;">&nbsp;</a></li>
            <li title="desensitizing"><a id="tab-pic12-p" class="  tab-pic12" href="javascript:;">&nbsp;</a></li>
            <div class="cl"></div>
        </ul>
        <div class="cl"></div>
    </div>

    <script type="text/javascript">
        var countries=new ddtabcontent("countrytabs")
        countries.setpersist(true)
        countries.setselectedClassTarget("link") //"link" or "linkparent"
        countries.init()
    </script>

    <div class="cl"></div>
    <div class="search-box fl"><input type="text" id="name" class="input-search" name="name" value=""></div>
    <div class="cl"></div>
</div>

Как видите, один div скрыт, а другой виден.

При каждом нажатии на ссылку класс add должен применяться к ее родителю.

j("#" + id + "-p").parent().addClass("add");
j("#" + id + "-b").parent().addClass("add");

Но это только добавление класса к <li>, который скрыт. Если я выполняю тот же код из консоли Firebug. Работает нормально.

Я пытался создать метод для этого, все тот же результат. Я не уверен, почему я сталкиваюсь с этим ребенком проблемы. Если кто-то сталкивался с подобной проблемой, пожалуйста, дайте мне знать.

Answer 1

Проблема заключается в том, что вы используете parent(), который просматривает дерево DOM только на один уровень выше текущего элемента, который в вашем случае равен li. Вместо этого вам нужно использовать closest(), который будет проходить весь DOM, пока не найдет первый элемент, соответствующий предоставленному селектору.

Учитывая это, у вас должно работать следующее:

j("#" + id + "-p").closest("DIV").addClass("add");
j("#" + id + "-b").closest("DIV").addClass("add");

Answer 2

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

  $(document).ready(function () {
        $("a[href='" + window.location.pathname + "']").parents(".hidden-ul").css("display", "block");
        $("a[href='" + window.location.pathname + "']").parent("li").addClass("select");
    });

Answer 3

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

j("#" + id + "-p").parents("DIV.tabcontent").addClass("add");
j("#" + id + "-b").parents("DIV.tabcontent").addClass("add");