Question

我正在尝试使用特定的html代码包装div，但我在使用jQuery的.before和.after时遇到问题，因为jQuery会自动关闭我添加到.before中的div。

这是我的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 div，这是我不想发生的事情，因为我试图在.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。

提前谢谢！

解决方案：

虽然没有什么好的解决方案，但我决定采用@ Andy-E的建议，因为他的代码对我来说看起来最干净。

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

谢谢大家参与！

Answer 1

改为使用wrap()。

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

Answer 2

jQuery有一个内置的wrap()函数，使用它：

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

演示：Your fiddle, updated。

此示例重点介绍了如何巧妙地将jQuery方法链接在一起。这里，所有三个方法都返回原始的$(".navigation") jQuery对象，因此不需要使用临时变量或破坏代码。

Answer 3

您可以尝试使用.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>');

Answer 4

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

应该适合你，

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

4 个答案: