CODEWITHSUNDEEP
javascriptjquerydom
chris
chris

Reputation: 36937

jQuery, reverse $.each of sorts?

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');
            }
        }
    }
});

Upvotes: 2

Views: 89

Answers (5)

adeneo
adeneo

Reputation: 318212

$('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.

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388316

Try

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

Upvotes: 0

jmar777
jmar777

Reputation: 39649

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/

Upvotes: 1

Leeish
Leeish

Reputation: 5213

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

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

Upvotes: 0

bfavaretto
bfavaretto

Reputation: 71918

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

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

Upvotes: 0

Related Questions