Question

i have a multilevel menu with anchor-tags in it.
My problem is to get the jQuery selectors to work properly.

Working code:

$(this)
    .closest('li')
    .siblings('li.open')
    .children('a')
    .children('i')
    .toggleClass('class1')
    .toggleClass('class2');

What it should be:

$(this)
    .closest('li')
    .siblings('li.open > a > i')
    .toggleClass('class1')
    .toggleClass('class2');

But not even this works:

$(this)
    .closest('li')
    .siblings('li.open a i')
    .toggleClass('class1')
    .toggleClass('class2');

What i want to do in text-form:
The onClick event targets an anchor tag. I want the i-Tags in the anchors of the siblings of his parent LI – god that sounds aweful – to toggle two different classes.

HTML

<ul>
    <li>
        <a><i class="class1"></i>Label</a>
        <ul>
            <li>
                <a><i class="class1"></i>Label</a>
            </li>
            <li>
                <a><i class="class1"></i>Label</a>
            </li>
            <li>
                <a><i class="class1"></i>Label</a>
            </li>
            <li>
                <a><i class="class1"></i>Label</a>
            </li>
            <li>
                <a><i class="class1"></i>Label</a>
            </li>
            <li>
                <a><i class="class1"></i>Label</a>
            </li>
            <li>
                <a><i class="class1"></i>Label</a>
            </li>
        </ul>
    </li>
    <li class="open">
        <a><i class="class1"></i>Label</a>
        <ul>
            <li>
                <a><i class="class1"></i>Label</a>
            </li>
            <li>
                <a><i class="class1"></i>Label</a>
            </li>
            <li>
                <a><i class="class1"></i>Label</a>
            </li>
            <li>
                <a><i class="class1"></i>Label</a>
            </li>
            <li>
                <a><i class="class1"></i>Label</a>
            </li>
            <li>
                <a><i class="class1"></i>Label</a>
            </li>
            <li>
                <a><i class="class1"></i>Label</a>
            </li>
        </ul>
    </li>
    <li>
        <a><i class="class1"></i>Label</a>
    </li>
    <li>
        <a><i class="class1"></i>Label</a>
    </li>
    <li>
        <a><i class="class1"></i>Label</a>
    </li>
    <li>
        <a><i class="class1"></i>Label</a>
    </li>
    <li>
        <a><i class="class1"></i>Label</a>
    </li>
</ul>

Answer 1

I think the reason it won’t work is because

('li.open > a > i') 

is not a sibling of

$(this).closest('li')

The sibling of the li is another li.

You could try

$(this).closest('li').sibling('li.open').find('a > i').toggleClass('blah');

Why can’t you use the first piece of code you posted?