Question

我有这个模式，我必须用jQuery改变：

    <li class="ref">
        <a href="#title1">title1</a>
    </li>
    <div id="title1" class="content"></div>
    <li class="ref">
        <a href="#title2">title2</a>
    </li>
    <div id="title2" class="content"></div>

我需要它成为：

  <ul>
    <li class="ref">
        <a href="#title1">title1</a>
    </li>
    <li class="ref">
        <a href="#title2">title2</a>
    </li>
 </ul>
<div>
    <div id="title1" class="content"></div>
    <div id="title2" class="content"></div>
</div>

我知道我最终可以包含li和div的组，但我希望能够在DOM中实现所有这些组合的简单方法，以正确的顺序替换它们。

Answer 1

您可以使用wrapAll()来包装选择器

 $('.ref').wrapAll('<ul>');
 $('.content').wrapAll('<div>');

fiddle here

Answer 2

这应该有帮助（fiddle）：

var ul = $('<ul>'), div = $('<div>'), body = $('body')
$('.ref').appendTo(ul)
$('.content').appendTo(div)
ul.add(div).appendTo(body)

重新排序/分组DOM中的不同元素以包装类似的元素

2 个答案: