jQuery: add class to parent element when child has class

Question

I'm trying to add class '.open' to the parent li for the children with class .showme I've tried several things so far (prev, prevAll, has etc) but I can't get it right.

This is my html structure and also a jsFiddle to work on. Any suggestions will be appreciated.

<ul class="product-categories">
    <li class="sub">
        <a href="#">Women</a>
        <ul>
            <li class=""> <a href="#">Clothing</a></li>
            <li class="showme"> <a href="#">Footwear</a></li>
        </ul>
    </li>
    <li class="no-sub"> <a href="#">Men</a></li>
    <li class="no-sub"> <a href="#">Children</a></li>
    <li class="offers"> <a href="#">Offers</a></li>
</ul>

$(".showme").prevAll("li.sub:first").addClass("open")

Arun P Johny · Accepted Answer · 2013-09-02 07:29:07Z

2

Use .closest(), Find the first element with class .showme then find the closest parent li with class sub

$('.showme:first').closest('li.sub').addClass('open');

answered Sep 2, 2013 at 7:29

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bikey77gy Over a year ago

+1 to this for also including :first so that the search stops at first element found instead of searching the entire DOM.

Rituraj ratan · Accepted Answer · 2013-09-02 07:26:24Z

0

$(".showme").closest("li.sub:first").addClass("open");

see reference closest

answered Sep 2, 2013 at 7:26

Rituraj ratan

10.4k8 gold badges38 silver badges55 bronze badges

1 Comment

JJJ Over a year ago

:first is superfluous since .closest() already selects only the first matching element.

Austin Brunkhorst · Accepted Answer · 2013-09-02 07:26:43Z

0

How about this?

$('.showme').closest('li.sub').addClass('open');

answered Sep 2, 2013 at 7:26

Austin Brunkhorst

21.1k6 gold badges49 silver badges61 bronze badges

Comments

Adil · Accepted Answer · 2013-09-02 09:22:22Z

0

You need to use closest() instead of prev() as prev and prevAll() will look the previous siblings and you need to search the parent. You probably do not need :first in selector as cloest will return you single element.

Live Demo

$(".showme").closest("li.sub").addClass("open")

As an additional note, you did not include required js library on given fiddle.

edited Sep 2, 2013 at 9:22

answered Sep 2, 2013 at 7:26

Adil

148k25 gold badges217 silver badges207 bronze badges

Collectives™ on Stack Overflow

jQuery: add class to parent element when child has class

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related