从 DOM 中分离元素，将其插入到不同的位置答案

【问题标题】：Detach element from DOM, insert it back in different spot从 DOM 中分离元素，将其插入到不同的位置
【发布时间】：2013-07-14 21:28:00
【问题描述】：

在页面上，我需要检测其中包含图像的所有条目，并将样式添加到 H1 和 img，以及在这些条目中包含 img 的 p。目前没问题。

  <div class="entry">
    <h1>Headline</h1>
    <p><img></p>
  </div>

  $("div.entry img").closest(".entry").find("h1").addClass("home-h1-adjust");
  $("div.entry img").closest("p").addClass("home-p-img-adjust");

要完全解决我面临的问题，我需要分离 h1 或 p，然后重新插入 p 在 h1 之前的位置，这是一系列条目，并非所有条目都有图像.

我陷入了循环并在 jQuery 中添加分离元素的正确方法上。谢谢。

【问题讨论】：

标签： jquery html dom prepend detach

【解决方案1】：

$('.entry > p').each(function() {
   $(this).insertBefore(this.previousElementSibling);
});

http://jsfiddle.net/Yr96v/

【讨论】：

感谢帮助，未定义。我必须只定位第一个 p 标签，并且只能在带有图像的条目中。这个小提琴显示了我的最终解决方案。 jsfiddle.net/lockedown/vkeeD/1

【解决方案2】：

//for each entry
$('div.entry').each(function(){
    var $this = $(this);

    //if entry has img
    if($this.find('img').length > 0) {
        //jQuery is chainable, and detaching is done automatically
        $this.find('h1').addClass('home-h1-adjust')
            .before($this.find('p').addClass('home-p-img-adjust'));
    }
});

http://jsfiddle.net/tB8f4/

【讨论】：

这真的帮助我开始了。一些条目中有多个 p 标签，另一些只有两个。如果您有兴趣，请提琴：jsfiddle.net/lockedown/vkeeD/1
这很酷。我看了你的最终代码。你本来可以这样做的。 link
啊哈。我以前不知道 eq() 。这似乎真的很有用。感谢您抽出宝贵时间分享，我会记住它。

【解决方案3】：

$('div.spacer a').addClass('test').each(
   function(){
       $(this).remove();
   }
);

您可以使用.each()，只需打开您的 chrome 控制台并使用它即可。上面的示例删除了此页面上的每个相关链接。当然你可以先var element = $(this).detach(); 然后element.appendTo('YOUR POSITION')

【讨论】：

感谢米沙，这是一个很好的方向，但最终，这个小提琴是我解决它的方法。 jsfiddle.net/lockedown/vkeeD/1

【解决方案4】：

以下是可行的解决方案：遍历页面上的所有条目，查找图像，将类附加到 H1 和第一个 p 标记。在 H1 上方添加包含图像的 p，作为条目 div 的第一个子项。

  <div class="entry">
     <h1>Headline 1</h1>
     <p><img />Image? Yes</p>
     <p>Some Text that needs to stay put</p>
     <p>More copy text</p>
  </div>

  <div class="entry">
     <h1>Headline 2</h1>
     <p>Text in a non image entry</p>
     <p>This text has no image to keep it company</p>
  </div>


  $('div.entry').each(function(){
     var $this = $(this);
     if($this.find('img').length > 0) {
        $this.find('h1').addClass('home-h1-adjust');   
        var $img = $this.find('p').first().addClass('home-p-img-adjust');
        $this.prepend($img);
    }
  });

http://jsfiddle.net/lockedown/vkeeD/1/

【讨论】：