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

在一个页面上，我需要检测所有包含图像的条目，并将样式添加到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中循环和预处理分离元素的正确方法。谢谢

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

http://jsfiddle.net/Yr96v/

//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/

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

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

以下是行之有效的解决方案：遍历页面上的所有条目，查找图像，将类附加到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/

相关内容

最新更新

热门标签：