使用jQuery的特定代碼包裝元素

我想包裝div與特定的html代碼，但我有問題使用jQuery的.before和.after，因爲jQuery會自動關閉我添加到.before的div。使用jQuery的特定代碼包裝元素

這是我的html：

<div class="navigation"> 
    <a>first</a> 
    <a>second</a> 
    <a>third</a> 
</div>

，當我嘗試使用此代碼：

$('.navigation').before('<div class="newNavigation"><a>Prev</a>'); 
$('.navigation').after('<a>Next</a></div>');

他將自動關閉.newNavigation格，這是我不希望發生的事情，因爲我試圖在.after代碼中關閉該div。生成的HTML看起來像這樣：

<div class="newNavigation"> 
    <a>Prev</a> 
</div> 
<div class="navigation"> 
    <a>first</a> 
    <a>second</a> 
    <a>third</a> 
</div> 
<a>Next</a>

而我試圖讓這個：

<div class="newNavigation"> 
    <a>Prev</a> 
    <div class="navigation"> 
     <a>first</a> 
     <a>second</a> 
     <a>third</a> 
    </div> 
    <a>Next</a> 
</div>

爲了幫助你有點這個我創建jsFiddle，我使用.before和.after失敗嘗試。

預先感謝您！

解決方案：

雖然有幾個很好的解決方案，我決定去@小寶-E建議，因爲他的代碼看起來乾淨的給我。

$(".navigation") 
    .wrap('<div class="newNavigation">') 
    .before("<a>Prev</a>") 
    .after("<a>Next</a>");

謝謝大家參與！

來源

2011-09-26 Klikerko

jQuery有一個內置的wrap()功能，使用它：

$(".navigation") 
    .wrap('<div class="newNavigation">') 
    .before("<a>Prev</a>") 
    .after("<a>Next</a>");

演示： Your fiddle, updated。

此示例突出顯示瞭如何整齊地將jQuery方法鏈接在一起。在這裏，所有三種方法返回原來$(".navigation") jQuery對象，所以沒有必要使用臨時變量或破壞你的代碼了。

來源

2011-09-26 14:54:54

謝謝安迪，這是非常乾淨的解決方案。 – Klikerko

@Klikerko：高興地幫助:-) –

改爲使用wrap()。

var wrapper = $('<div />').addClass('newNavigation'); 
$('.navigation').wrap(wrapper); 
$('.newNavigation').prepend('<a>Prev</a>').append('<a>Next</a>');

來源

2011-09-26 14:54:12 Clive

嗨克萊夫，我不知道，如果你已經測試你的代碼，但在包裝的工作並不前置和後置的鏈接。 – Klikerko

道歉，我想'通過wrapper'將攜帶一個jQuery對象？顯然不是！我已經更新的代碼和它的工作原理：在[的jsfiddle（http://jsfiddle.net/rVz2k/1/） – Clive

你最新的更新要少得多高性能比它可能是因爲它需要調用選擇發動機的兩倍。這種效應在IE 7和更老，惡化不支持'querySelectorAll'或'getElementsByClassName'。 –

你可以嘗試只使用html的（）是這樣的：

// Get the original html from the navigation div: 
var navigationHtml = $('.navigation').html(); 

// Replace the contents of navigation with the original html surrounded by the extra elements 
$('.navigation').html('<div class="newNavigation"><a>Prev</a>' + navigationHtml + '<a>Next</a></div>');

來源

2011-09-26 14:54:36 codefrenzy

感謝codefrenzy，你的解決方案几乎可以工作。唯一的問題是我需要「prev」和「next」鏈接在.navigation div之外。這是一個小錯誤，但非常感謝您的幫助！ – Klikerko

啊，對不起，你說得對！很高興你在其他地方得到了正確的答案:) – codefrenzy

$(".navigatioin").wrap('<div class="newNavigation"></div>'); 
$(".newNavigation").prepend('<a>Prev</a>').append('<a>Next</a>');

應該爲你工作，

來源

2011-09-26 14:55:31

使用jQuery的特定代碼包裝元素

回答

相關問題