JQuery | 更改ul-> li-> a的innert html内容

Question

我有以下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>

我是jquery的新手.我想要的是我想在一个范围内包装锚标签的内部html(例如Home等).我希望通过jquery准备好这个功能.

Answer 1

您可以使用jQuery contents()来获取所有内容(textNodes和子元素),然后将它们全部包装起来wrapAll().

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

});

如果你想<a>用span 包装每个文本节点和元素,让我们稍微修改一下代码,现在使用wrap():

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

jQuery在它们的方法名称中非常冗长,你可以搜索你想要做的事情,并且它们有一个等效的方法.