JQuery: как применять те же изменения внутри Mulitple контейнера с таким же именем класса

Question

я пытаюсь переместить .details вне .buttons

<div class="product-actions">product 1 
     <div class="buttons buttons_3 group">buttons 
     <a class="details" title="Détails" rel="nofollow" >link</a> 
     </div> 
    </div> 

    <div class="product-actions">product 2 
     <div class="buttons buttons_3 group">buttons 
     <a class="details" title="Détails" rel="nofollow" >link</a> 
    </div> 
    </div> 

это сделать трюк

if ($('.product-actions').length) 
    {  

    $('.product-actions').prepend("<div id='new_details_location'></div>"); 
    $(".details").prependTo("#new_details_location"); 

    $('.buttons_3').attr('class','buttons buttons_2 group');   
    } 

проблема существует более одного продукта, и все элементы a.details перемещаются в первый продукт div вместо того, чтобы быть добавленным в начале каждого div .product-действия:

http://jsfiddle.net/upKhq/2/ любая идея?

Answer 1

Вы можете использовать каждый метод JQuery:

$('.product-actions').each(function() { 
    var self = $(this); 
    var new_location = $("<div id='new_details_location'></div>").prependTo(self); 
    self.find(".details").prependTo(new_location); 
    self.find('.buttons_3').attr('class','buttons buttons_2 group'); 
}); 

И вы не должны использовать один и тот же идентификатор для двух элементов.

Answer 2

Попробуйте FIDDLE

$('.product-actions').each(function() { 
    $new = $(this).prepend("<div class='new_details_location'></div>"); 
    $(".details", $(this)).prependTo($new); 

    $('.buttons_3', $(this)).attr('class', 'buttons buttons_2 group'); 
}); 

Вы сделали несколько ошибок: ваши селекторы не контекстная, и вы использовали id в prependTo, который должен быть уникальным, но у вас 2 дивы с одинаковыми идентификаторами.

Answer 3

Возможно, вы сделали это?

$('.product-actions').each(function() { 
    $elem = $("<div class='new_details_location'></div>"); 
    $(this).find(".details").prependTo($elem); 
    $(this).prepend($elem); 
}); 

$('.buttons_3').attr('class', 'buttons buttons_2 group'); 

http://jsfiddle.net/samliew/upKhq/4/

Answer 4

используйте .each и используйте $ (this) для обозначения текущего элемента .product-actions. Кроме того, вы не можете иметь несколько идентификаторов, которые бы совпадали, только один из них когда-либо использовался.

if ($('.product-actions').length) {  
    $('.product-actions').each(function() { 
     var newDetailLocation = $('<div></div>'); 
     $(this).prepend(newDetailLocation); 
     $(".details",$(this)).prependTo(newDetailLocation); 
     $('.buttons_3',$(this)).attr('class','buttons buttons_2 group');   
    }); 
}