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

});

如果你想用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

JQuery |更改ul-＆gt; li-＆gt; a的innert html内容

3 个答案: