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が初めてです。私が欲しいのは、アンカータグ(ホームなど)の内部htmlをスパンでラップしたいということです。ドキュメントの準備ができたときにjqueryを介してこの機能が必要です。

4

3 に答える 3

5

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>は、コードを少し変更してみましょう。ここでは、次を使用し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 に答える