.append .prepend問題

您好我最近好喜歡使用JQuery的.append .prepend方法，我知道這些方法很好的問題，但有一個奇怪的故障發生時，我嘗試這樣的代碼：.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的由way

;(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;'); 
};

}）（jQ uery）;

來源

2013-01-11 Nazarene Gonzales

您正在使用prepend和append方法，請參閱DOC。順便說一句，jQuery API獲得一個.wrap（）方法。 –

是的，但是我也試過這一個，這是一個好主意太多，但我找不到這個.wrap（解決方案）對我的代碼工作過，除非我知道如何選擇標籤中的文本，敷在我已經嘗試過這個，但沒有工作$（「＃nashgraphics-menu ul li a.toplevel -a」）。text（）。wrap（'content content'）; –

你想在標記的條款，但你不會被時間標記處理您正在修改的頁面，你在處理DOM對象。

如果你的目標是把每個#nashgraphics-menu ul li a.toplevel-a元素你所描述的結構中，使用 wrap function：

$("#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>');

...雖然我不是100％肯定，wrap能夠處理複雜的結構像那樣。您可能需要單獨創建的結構，像這樣：

$("#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>');

...把一個div在類"foo"的每個元素周圍都有類"bar"。

回覆您的評論：

是的，我也想過這個問題，但我關心的是我要來包裝標籤，而不是裏面的文字標籤本身

好吧，因此略有不同：

$("#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-11 12:03:04

你也可以使用$ .replaceWith（），沿着這些路線的東西：'$（ 'A'）replaceWith（ '

blah'+$('a').html()+'

'）;'因爲我們正在處理這種複雜的HTML。似乎很多改變一些標記，我想知道爲什麼它需要？ – jammypeach

是的我也曾想過，但我的擔心是我想包裝標籤內的文本，而不是標籤本身 –

我在wordpress上使用JQuery的方式，所以它會自動生成列表和標籤我只需要追加並加上那些 –

瀏覽器或jQuery可能會添加結束標記以生成有效的HTML，因爲自從執行prepend之後，它將不會有效，直到執行append。

看看 wrap method。

描述：將HTML結構包裹在匹配元素集中的每個元素周圍。

來源

2013-01-11 12:02:11 Diego

.append .prepend問題

回答

相關問題