CODEWITHSUNDEEP
jquerychildren
Laurence L
Laurence L

Reputation: 623

Toggle class on direct children

I have several divs with the same class. I want to be able to toggle the class on the children of each independently on a click function.

if($("div").hasClass("subLinkPage")) {
    $(".sub-expand_collapse").children(".fa").toggleClass('fa-minus fa-plus');
}

What do I add to this script so it only runs on the immediate children of each.

Thanks for any suggestions

HTML

  <div class="subLinkPage"> 
    <ul aria-labelledby="headLnk_02" class="nav__items">
        <li class="sub_p01 togSubList">

             <a role="button" href="#" class="sub-expand_collapse" aria-label="toggle menu">
                <i class="fa fa-plus" aria-hidden="true"></i>
            </a>

            <a id="subLnk_01" class="parent_link menu_p01" href="../content/m04/m04_c02_p01.html">Facebook feed</a>            
            <ul class="sub_items sub_items_01">
                <li><a href="../content/m04/m04_c02_p01-a.html" class="menu_p01a">Adding a Facebook feed<br/>to the home page</a></li>
            </ul>
        </li>
        <li class="sub_p02 togSubList">


            <a role="button" href="#" class="sub-expand_collapse" aria-label="toggle menu">
              <i class="fa fa-plus" aria-hidden="true"></i>
            </a>

            <a id="subLnk_02" class="parent_link menu_p02" href="../content/m04/m04_c02_p02.html">Twitter feed</a>            
            <ul class="sub_items sub_items_02">
                <li><a href="../content/m04/m04_c02_p02-a.html" class="menu_p02a">Adding a Twitter<br/>feed web part</a></li>
            </ul>
        </li>       
    </ul>
</div>

Upvotes: 2

Views: 1604

Answers (3)

MaxZoom
MaxZoom

Reputation: 7743

You can use the immediate child jQuery selector (parent > child)

$("div.subLinkPage").on('click', function() {
  $(this).find(".sub-expand_collapse > .fa").toggleClass('fa-minus fa-plus');
});

Upvotes: 1

user4616966
user4616966

Reputation:

You can do things like $("MyElement > MyElementsChild").remove();
The ">" states that it's a child element.

Upvotes: 0

jake2389
jake2389

Reputation: 1174

If it's inside a .click event, use $(this) instead of $(".sub-expand_collapse")

Upvotes: 0

Related Questions