Question

I am trying to use

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

I have a structure something like this:

<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>

As you can see, one div is hidden while the other is visible.

Whenever a link is clicked, a class of add should be applied to it’s parent.

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

But, it’s only adding the class to the <li> that is hidden. If I execute the same code from the Firebug console. It works fine.

I tried creating a method for doing this, still the same result. I am not sure why I am facing this kid of problem. If anyone has faced similar problem, please let me know.

Answer 1

The issue is because you are using parent() which only looks one level up the DOM tree from the current element, which in your case is the li. You need to use closest() instead, which will traverse it’s way up the entire DOM until it finds the first element matching the selector provided.

With that in mind, the following should work for you:

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