Отсоедините элемент от DOM, вставьте его обратно в другое место

Question

На странице мне нужно обнаружить все записи, в которых есть изображение, и добавить стили к H1 и img и p, которые содержат img в этих записях , Пока нет проблем.

<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 или р, и снова вставить туда, где р предшествует h1, и это для ряда записей, не все которые имеют изображение.

Я зацикливаюсь на правильном пути, чтобы прокрутить и добавить отдельные элементы в jQuery. Благодарю.

Answer 1

Вот решение, которое сработало: перебирайте все записи на странице, ищите изображение, присоединяйте классы к тегу H1 и first p. Подготовьте p, содержащий изображение выше H1, в качестве первого дочернего элемента 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/

Answer 2

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

http://jsfiddle.net/Yr96v/

Answer 3

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

Answer 4

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

Вы можете использовать .each() просто открыть хромированную консоль и играть с ним. приведенный выше пример удаляет каждую связанную ссылку на этой странице. конечно, вы могли бы сделать var element = $(this).detach();, а затем element.appendTo('YOUR POSITION')