javascript - 对 DOM 中的不同元素重新排序/分组，以便包装相似的元素

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>');

在这里摆弄

Answer 2

这应该有帮助（小提琴）：

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