Question

我越过了一个奇怪的问题。我有一个列表，其中包含如下链接：

<ul class="sub-navigation">
    <li><a href="">a</a></li>
    <li><a href="">b</a></li>
    <li><a href="">c</a></li>
    <li><a href="">d</a></li>
    <li><a href="">e</a></li>
</ul>

我想要做的是让jQuery将列表分成两部分，方法是在第三个列表项之后插入关闭然后打开标签。所以我这样说：

$('.sub-navigation li').eq(2).after('google');

它正确插入了文本，我得到了：

<ul class="sub-navigation">
    <li><a href="">a</a></li>
    <li><a href="">b</a></li>
    <li><a href="">c</a></li>google
    <li><a href="">d</a></li>
    <li><a href="">e</a></li>
</ul>

这是正确的，但当我尝试插入实际的标签时：

$('.sub-navigation li').eq(2).after('</ul><ul class="sub-navigation">');

它反转了他们o_O

<ul class="sub-navigation">
    <li><a href="">a</a></li>
    <li><a href="">b</a></li>
    <li><a href="">c</a></li><ul class="sub-navigation"></ul>
    <li><a href="">d</a></li>
    <li><a href="">e</a></li>
</ul>

为什么会这样？不能before()只插入我给它的原始HTML吗？如果我尝试仅插入</ul>，则会消失...

提前致谢！

Answer 1

before()和after()等jQuery方法操纵浏览器的DOM树 DOM包含完整的 HTML元素。你不能把一半的标签。

相反，您需要操纵整个标记：

$('.sub-navigation li:eq(2)').nextAll().remove().appendTo(
    $('<ul class="sub-navigation">').insertAfter($('.sub-navigation'))
)

Answer 2

插入带有语法错误的HTML标记是不好的，因为几乎所有的网页浏览器都会尝试 自动修复它，这就是你尝试插入{{}的原因1}}这是一个错误的语法，不能按预期工作。

回答您的问题，您可以执行以下操作：

<ul/>

你可以see a working on example with your markup in this jsfiddle。

Answer 3

你可以使用jquery的remove / detach（如果要保留元素上的绑定事件，请使用detach）然后将其附加到新创建的ul

例如：

$(document).ready(function(){   
    $('.sub-navigation').after($('<ul class="sub-navigation"></ul>').append($('.sub-navigation li:gt(2)').remove()));
});

jsfiddle

上的示例代码

jQuery before（）/ after（）与HTML无法正常工作？

3 个答案: