jQuery, reverse $.each of sorts?

Question

I am trying to run down a UL set:

<ul>
    <li>
        <h2>Header 1</h2>
        <ul class="collapse">
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
            <li>E</li>
        </ul>
    </li>
    <li>
        <h2>Header 2</h2>
        <ul class="collapse">
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
            <li>
                <h2>Header 3</h2>
                <ul class="collapse">
                    <li>A</li>
                    <li>B</li>
                    <li>C</li>
                    <li>D</li>
                    <li>
                        <h2>Header 4</h2>
                        <ul class="collapse open">
                            <li>A</li>
                            <li>B</li>
                            <li>C</li>
                            <li>D</li>
                            <li>E</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Where if I find one of the children with the class open I want to remove the class collapse and/or open from any parent level UL's prior to that child found with open. Maybe I'm to tired, but I have this seriously flawed logic, in my head I am trying to make sense of it, at the same time I feel its not logical, and theres bound to be an easier way to do this. (Mind you the $.each() I am currently attempting is flawed and doesnt work anyway). But I could use some ideas how to approach this if anyones go some.

$('ul').each(function()
{
    if($(':not(:first)', this))
    {
        if($(this).hasClass('collapse'))
        {
            alert('collapse found');
            $kid = $(this).child('ul');

            if($kid.hasClass('open'))
            {
                alert('uh')
                $kid.parents('ul').removeClass('collapse');
            }
        }
    }
});

adeneo · Accepted Answer · 2013-03-28 17:20:24Z

2

$('ul.open:has(li.open)').removeClass('open collapse');

Find all UL's with the .open class, and check if they contain a LI with the .open class, if so remove both open and collapse classes if present.

answered Mar 28, 2013 at 17:20

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

1 Comment

chris Over a year ago

This is a nice idea, unfortunately I think its going against the grain I seek. Initially I was using $('ul:first-child').find('ul.open').removeClass('collapse open'); as my means of doing what I needed, then I realized there is the occasional case where one of the child elements within a parent element may have a class with open. Where if it does, and the parent doesn't I want to remove the open and collapse class from all parents of that initial child element (as well as the child element that was found with open initially)

jmar777 · Accepted Answer · 2013-03-28 17:19:19Z

1

If you put some sort of an identifier or class on your top ul, you can do something like this:

$('.collapse .open')
    .parentsUntil('#root', 'ul.collapse')
    .removeClass('collapse');

Edit: Here's a jsfiddle to demonstrate: http://jsfiddle.net/vA5Gu/

Also, even though not stated in the question, it sounds like you might also want to remove the collapse class on the element with the open class as well? If so, you just need to add the addBack() command. E.g.,

$('.collapse .open')
    .parentsUntil('#root', 'ul.collapse')
    .addBack()
    .removeClass('collapse');

Which is demonstrated here: http://jsfiddle.net/vA5Gu/1/

answered Mar 28, 2013 at 17:19

jmar777

39.8k11 gold badges68 silver badges66 bronze badges

2 Comments

chris Over a year ago

This actually kind of works (unfortunately I am stuck with jQuery 1.4 and its earliest adoption of parentsUntil()). So addBack() doesn't work for me, but the first version does nice. Only problem is all parents prior to there classes remove find, however the child that sparks it so to speak remains stuck with the classes that need removing

chris Over a year ago

actually adding a removeClass() then the rest solved that issue, love chaining..

bfavaretto · Accepted Answer · 2013-03-28 17:16:59Z

0

Not sure if I got the issue clearly, but would this work?

$('.collapse.open').each(function(){
    $(this).closest('ul.collapse').removeClass('collapse');
});

answered Mar 28, 2013 at 17:16

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

Comments

Leeish · Accepted Answer · 2013-03-28 17:17:14Z

0

$('.collapse .open').each(function(){
    $(this).parent().removeClass('collapse');
});

I think this would work. I'd need to test in a fiddle.

answered Mar 28, 2013 at 17:17

Leeish

5,2132 gold badges20 silver badges48 bronze badges

Comments

Arun P Johny · Accepted Answer · 2013-03-28 17:20:09Z

0

Try

$('.collapse.open').each(function(){
    $(this).parents('ul.collapse, ul.open').removeClass('collapse open');
});

answered Mar 28, 2013 at 17:20

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Collectives™ on Stack Overflow

jQuery, reverse $.each of sorts?

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related