3

我有以下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 在文档上准备好这个功能。

4

3 回答 3

5

您可以使用 jQuerycontents()获取所有内容（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 的方法名称非常冗长，您可以搜索您想要做的事情，并且他们有一个等效的方法。

于 2012-05-11T07:18:07.187 回答
1

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

于 2012-05-11T07:24:03.770 回答
1

JSFiddle 工作示例：点击这里

这是正确的方法：

​​$(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 工作示例：点击这里

于 2012-05-11T07:51:48.470 回答