CODEWITHSUNDEEP
jquery
dama_do_bling
dama_do_bling

Reputation: 344

trouble with jquery selecting parents to unwrap and excluding children

I'm having a devil of a time with unwrap and parents and children. Here is the sample code:

<li class="toplevel menu-item menu-item-type-post_type menu-item-object-page menu-item-95" id="menu-item-95"><a href="http://mysite.com/something">some word</a>
    <ul class="sub-menu">
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-102" id="menu-item-102"><a href="http://mysite.com/something">wome word</a></li>
        <li class="nolink menu-item menu-item-type-custom menu-item-object-custom menu-item-103" id="menu-item-103"><a href="http://mysite.com/our-coalitions">projects</a>
            <ul class="sub-menu">
                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-110" id="menu-item-110"><a href="http://mysite.com/proje1">project</a></li>
                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-111" id="menu-item-111"><a href="http://mysite.com/proj2">project2</a></li>
                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-112" id="menu-item-112"><a href="http://mysite.com/proj3">project 3</a></li>
            </ul>
        </li>
        <li class="nolink menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-104" id="menu-item-104"><a href="http://mysite.com">another link</a></li>
    </ul>
</li>

What I'm trying to do is remove the hyperlinks with nolink class while keeping the <li>s intact, so I have something effectively like:

<li class="toplevel menu-item menu-item-type-post_type menu-item-object-page menu-item-95" id="menu-item-95"><a href="http://mysite.com/something">some word</a>
    <ul class="sub-menu">
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-102" id="menu-item-102"><a href="http://mysite.com/something">wome word</a></li>
        <li class="nolink menu-item menu-item-type-custom menu-item-object-custom menu-item-103" id="menu-item-103">projects
            <ul class="sub-menu">
                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-110" id="menu-item-110"><a href="http://mysite.com/proje1">project</a></li>
                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-111" id="menu-item-111"><a href="http://mysite.com/proj2">project2</a></li>
                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-112" id="menu-item-112"><a href="http://mysite.com/proj3">project 3</a></li>
            </ul>
        </li>
        <li class="nolink menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-104" id="menu-item-104">another </li>
    </ul>
</li>

Getting very confused on how to do that! When i use $('.nolink a').unwrap() it unwraps the ones I want AND the children.

Upvotes: 1

Views: 351

Answers (1)

iambriansreed
iambriansreed

Reputation: 22241

Try: $('.nolink>a').contents().unwrap();​

Proof: http://jsfiddle.net/iambriansreed/EbHvP/

The > makes sure it grabs only a directly under .nolink. (sizzle)

Upvotes: 2

Related Questions