如何在里面包装和重新排序元素？答案

【问题标题】：How to wrap and re-order elements inside?如何在里面包装和重新排序元素？
【发布时间】：2013-07-10 11:32:25
【问题描述】：

我正在尝试用 jQuery 将一些元素包装在一个 li 元素中。我的问题是我想切换它们在 li 中的顺序。现在是li start - a - div - li end，但我想要li start - div - a - li end。

我该怎么做？我尝试了一切，但没有奏效。这是我当前的代码：

$('a.top_link+div.sub').not(":first").each(function() {
  $(this).prev().andSelf().wrapAll('<li class="aaa">');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="something.com" class="top_link">Something</a>
<div class="sub">Some other content..</div>

我想包装它并将内容重新排序为：

<li class="aaa">
  <div class="sub">Some other content..</div>
  <a href="something.com" class="top_link">Something</a>
</li>

上面的元素不止一个，只是内容不同（菜单的一部分）。

【问题讨论】：

请也发布相关的HTML ..
加个fiddle是可能的，会很容易理解和纠正

标签： javascript jquery wrapall

【解决方案1】：

这应该可行：

$('a.top_link+div.sub').each(function () {
    $(this).insertBefore($(this).prev()).add($(this).next()).wrapAll('<li class="aaa">');
});

对于每个div.sub，上面的代码都会：

将其移至<a> 之前
将<a> 添加到集合中
将两者都包装在 <li> 中

演示：http://jsfiddle.net/vjC3x/

【讨论】：