jQuery |更改 ul->li->a 的内部 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 的新手。我想要的是我想在一个跨度中包装锚标记（例如 Home 等）的内部 html。我希望通过 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

});

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

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

jQuery 的方法名称非常冗长，你可以搜索你想要做的事情，并且他们有一个等效的方法。

Answer 2

使用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/

Answer 3

JSFiddle 工作示例：click here

这是正确的做法：

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

它会变形

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

到

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

JSFiddle 工作示例：click here