How do I use jquery to select a sibling of the parent element?

I am trying to use jquery to specifically select a sibling a parent element that has the same . the code is like this:

HTML

    <div class="cool-check-list">
        <ul>
        <li>
            <label>
                <span class="icon"></span> <!-- trying to select this -->
                Awesome Label Name
            </label>

            <ul>
                <li>
                    <label>
                        <span class="icon"></span> <!-- clicking this toggles the class of the above icon clas开发者_如何学Gos -->
                        Awesome Label Name 2
                    </label>    
                </li>                        
            </ul>
        </li>
        </ul>
   </div>

JQUERY

    $('.icon', '.cool-check-list').click( function(e){

    $(this).parent('li label .icon').toggleClass('icon-alternate');

    });

---

Assuming you've already gotten a reference to the clicked span, you could do this:

$(this).closest("ul").siblings().find(".icon")

Where this is the span you clicked. closest gets the nearest ancestor that matches the selector.

---

You should tell us more precisely what you wanted to select and what you tried.

Anyway, you can use the parents() function of jquery, for instance :

$(".icon").parents("li")

will select every node li 'before' the class icon in the DOM.

Btw, take care of the difference between parents and parent - quoting the jquery documentation:

The .parents() and .parent() methods are similar, except that the latter only travels a single level up the DOM tree.