jQuery将节点移出其父节点答案

【问题标题】：jQuery move node out of its parentjQuery将节点移出其父节点
【发布时间】：2011-06-17 09:40:30
【问题描述】：

我有这个代码：

<ul class="list">
  <li>
    <a href="#" >
      <img src="IMAGE" />
      SOME TEXT
    </a>
  </li>
  <li>
    <a href="#" >
      <img src="ANOTHER IMAGE" />
      SOME DIFFERENT TEXT
    </a>
  </li>
</ul>

我希望像这样将图像添加到父节点：

<ul class="list">
  <li>
    <img src="IMAGE" />
    <a href="#" >
      SOME TEXT
    </a>
  </li>
  <li>
    <img src="ANOTHER IMAGE" />
    <a href="#" >
      SOME DIFFERENT TEXT
    </a>
  </li>
</ul>

【问题讨论】：

追加发生时应该触发任何特定事件吗？ ...您是否已经尝试过任何 JS 代码？
不确定您想要做什么...在示例中显示的其余代码已经在 DOM 中之后，您是否使用 jQuery 添加 img 标记？
这张图片是怎么来的？某种触发器/ajax？
不需要触发器，当 dom 准备好时，它应该被分离并立即附加到 li 标记之后，就像我的示例中一样，.. 是的，我已经尝试了一些代码，但它有点复杂所以我选择了这个简单的代码示例
那么在这种情况下@Alnitak 给你的答案应该是完美的。

标签： javascript jquery html prepend

【解决方案1】：

试试这个：

$('.list > li > a > img').each(function() {
    $(this).insertBefore($(this).parent());
})

http://jsfiddle.net/alnitak/3nEVz/的演示

编辑我想出了一个更简洁的版本：

$('.list > li > a > img').each(function() {
    $(this).parent().before(this);
})

【讨论】：

是的，我刚刚修改以在您发表评论时更改它
nb：我选择了这条路线，而不是简单地添加到<li>，因为它明确地将“img”移动到“a”之前，而不管可能存在的任何其他元素。
哦，太好了，.. 即使在我复杂的情况下它也能完美运行 :) BIIIG 谢谢 :)
@Alnitak：好点，值得澄清。取决于 OP 的目标是将img 与a 保持一致还是将其作为li 中的第一个元素。
@Luke 好吧，标题是“附加到父级”，所以我认为将其保留在 a 是正确的做法。

【解决方案2】：

$('ul.list img').each(function(_, elem) {
    var $elem = $(elem);
    $elem.prependTo( $elem.closest('li') );
});

演示：http://jsfiddle.net/hPbZD/1/

【讨论】：

【解决方案3】：

试试这个：

$(function() {
    $('ul.list > li > a > img').each(function() {
      $(this).closest('li').prepend(this);
    });
});

看到它在行动here。

【讨论】：