使用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>");

谢谢大家参与！

答

jQuery有一个内置的wrap()功能，使用它：

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

演示： Your fiddle, updated。

此示例突出显示了如何整齐地将jQuery方法链接在一起。在这里，所有三种方法返回原来$(".navigation") jQuery对象，所以没有必要使用临时变量或破坏你的代码了。

谢谢安迪，这是非常干净的解决方案。 – Klikerko

@Klikerko：高兴地帮助:-) –

答

改为使用wrap()。

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

嗨克莱夫，我不知道，如果你已经测试你的代码，但在包装的工作并不前置和后置的链接。 – 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>');

感谢codefrenzy，你的解决方案几乎可以工作。唯一的问题是我需要“prev”和“next”链接在.navigation div之外。这是一个小错误，但非常感谢您的帮助！ – Klikerko

啊，对不起，你说得对！很高兴你在其他地方得到了正确的答案:) – codefrenzy

答

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

应该为你工作，

使用jQuery的特定代码包装元素

相关推荐