0

こんにちは、JQuery の .append .prepend メソッドの使用に問題があります。これらのメソッドはよく知っていますが、そのようなコードを試したときに奇妙な不具合が発生します。

$("#nashgraphics-menu ul li a.toplevel-a")
 .prepend('<span class="main-navigation-button-left"></span><span class="main-navigation-button-body"><h1>');
$("#nashgraphics-menu ul li a.toplevel-a")
 .append('</h1></span><span class="main-navigation-dropdown-button-right"></span>');

適切に機能するはずですが、残念ながら機能しませんでした。なぜだろうと思っています

注：「リンク」テキストについて話しているのですが、これらのタグはそのテキストをラップする必要がありますが、そうではありません

コードはこれを出力する必要があります：

<span class="main-navigation-button-left"></span>
<span class="main-navigation-button-body"><h1>Link</h1></span>
<span class="main-navigation-dropdown-button-right"></span>

しかし、それは次のようになります：

<span class="main-navigation-button-left"></span>
<span class="main-navigation-button-body"><h1></h1></span>Link<span class="main-navigation-dropdown-button-right"></span>

そのテキスト「リンク」はタグ内にある必要があります

ちなみに、Wordpressでこれを使用しているコード全体は次のとおりです

;(function($){
$.fn.nashgraphics_menu = function(){
    $("#nashgraphics-menu ul li").each(function(index){
        $('#nashgraphics-menu ul li').addClass('toplevel-nochild');
        $('#nashgraphics-menu ul li ul li').removeClass('toplevel-nochild').addClass('nochild');
        $('#nashgraphics-menu ul li:has(ul)').removeClass('toplevel-nochild nochild').addClass('toplevel');
        $('#nashgraphics-menu ul li ul li:has(ul)').removeClass('toplevel nochild').addClass('haschild');

        $('#nashgraphics-menu ul li a').addClass('toplevel-nochild-a');
        $('#nashgraphics-menu ul li ul li a').removeClass('toplevel-nochild-a').addClass('nochild-a');
        $('#nashgraphics-menu ul li:has(ul) > a').removeClass('toplevel-nochild-a nochild-a').addClass('toplevel-a');
        $('#nashgraphics-menu ul li ul li:has(ul) > a').removeClass('toplevel-a nochild-a').addClass('haschild-a');
    });

    $("#nashgraphics-menu ul li a.toplevel-a").prepend('<span class="main-navigation-button-left"></span><span class="main-navigation-button-body"><h1>');
    $("#nashgraphics-menu ul li a.toplevel-a").append('</h1></span><span class="main-navigation-dropdown-button-right"></span>');

    $('#nashgraphics-menu ul li a.haschild-a').append('&nbsp; &raquo;');
};

})(jQuery);

4

2 に答える 2

2

あなたはマークアップの観点から考えていますが、ページを変更するときまでにマークアップを扱っているわけではなく、DOM オブジェクトを扱っています。

#nashgraphics-menu ul li a.toplevel-a記述した構造内に各要素を配置することが目標の場合は、次のwrap関数を使用します。

$("#nashgraphics-menu ul li a.toplevel-a").wrap('<span class="main-navigation-button-left"></span><span class="main-navigation-button-body"><h1></h1></span><span class="main-navigation-dropdown-button-right"></span>');

wrap...とはいえ、そのような複雑な構造を 100% 処理できるとは限りません。次のように、構造を個別に作成する必要がある場合があります。

$("#nashgraphics-menu ul li a.toplevel-a").each(function() {
    var $a = $(this),
        $wrapper;

    // Create the wrapper
    $wrapper = $('<span class="main-navigation-button-left"></span><span class="main-navigation-button-body"><h1></h1></span><span class="main-navigation-dropdown-button-right"></span>');

    // Insert it prior to the anchor
    $wrapper.insertBefore($a);

    // Move the anchor into the `h1`
    $wrapper.find('h1').append($a);
});

参考までに、より単純な の例を挙げるとwrap、次のようになります。

$(".foo").wrap('<div class="bar"></div>');

...すべての要素を with class で囲みdivます。"bar""foo"

あなたのコメントについて：

はい、私もそれについて考えていましたが、私の懸念は、タグ自体ではなく、タグ内のテキストをラップしたいということです

さて、それは少し異なります：

$("#nashgraphics-menu ul li a.toplevel-a").each(function() {
    var $a = $(this);

    $a.html('<span class="main-navigation-button-left"></span><span class="main-navigation-button-body"><h1>' + $a.html() + '</h1></span><span class="main-navigation-dropdown-button-right"></span>');
});
于 2013-01-11T12:03:04.433 に答える
0

おそらく、ブラウザーまたは jQuery が終了タグを追加して、有効な HTML を作成しprependますappend。

wrapメソッドを見てください。

説明: 一致した要素のセット内の各要素を HTML 構造で囲みます。

于 2013-01-11T12:02:11.670 に答える