• Geek asks and answers

    JQuery | change the contents of innert html ul-> li-> a

    I have the following html

        <ul class="links main-menu">
    <li class="menu-385 active-trail first active"><a class="active" title="" href="/caribootrunk/">HOME</a></li>
    <li class="menu-386 active"><a class="active" title="" href="/caribootrunk/">FIND LOCAL PRODUCTS</a></li>
    <li class="menu-387 active"><a class="active" title="" href="/caribootrunk/">DO BUSINESS LOCALLY</a></li>
    <li class="menu-388 active"><a class="active" title="" href="/caribootrunk/">LOCAL NEWS &amp; EVENTS</a></li>
    <li class="menu-389 active"><a class="active" title="" href="/caribootrunk/">BLOG</a></li>
    <li class="menu-390 last active"><a class="active" title="" href="/caribootrunk/">ABOUT US</a></li>
    </ul>

    I am new to jquery. I want me to wrap the internal html of the anchor tag (e.g. Home, etc.) in between. I want this functionality through jquery on a finished document.

    +3
    source share
    3 answers

    You can use jQuery contents()to get everything (text and children) and then wrap them all with wrapAll().

    $(function(){
    $('.main-menu a')   //your target
        .contents()           //get target contents (elements and textNodes)
        .wrapAll('<span>');   //wrap them all with a span

});

    If you want to wrap each text node and elements inside <a>with a span, modify the code a bit using wrap():

    $(function(){
    $('.main-menu a')   //your target
        .contents()           //get target contents (elements and textNodes)
        .wrap('<span>');      //wrap each with span
});

    jQuery is pretty verbose in your method names, you can search for what you want and they have an equivalent method for it.

    +5

    wrapInner()

    $(function(){
    $('.links a').wrapInner('<span />');   
    /** 
     * wrapInner: Wrap an HTML structure around the content of 
     * each element in the set of matched elements.
     */
});

    : http://jsfiddle.net/8qPME/

    +1

    JSFiddle:

    :

    ​​$(document).ready(function() {
    $("ul.links a").wrapInner('<span>');   
});


    <li><a>BLOG</a></li>
<li><a>DO BUSINESS LOCALLY</a></li>

    to

    <li><a><span>BLOG</span></a></li>
<li><a><span>DO BUSINESS LOCALLY</span></a></li>

    JSFiddle:

    +1

    More articles:


    All Articles