Tạo div bao bọc xung quanh hai div khác với jQuery

Question

Làm cách nào để thêm phần tử div vào khoảng 2 (hoặc nhiều hơn) div? Những gì tôi nghĩ:

HTML:

<div class="list-price">20000</div> 
<div class="sell-price">10000</div> 

jQuery:

$('div.list-price').each(function() { 
    $(this).before('<div class="action-price">'); 
    $(this).next().after('</div>'); 
    }); 

Tôi hy vọng rằng mã trên sẽ làm điều này:

<div class="action-price"> 
<div class="list-price">20000</div> 
<div class="sell-price">10000</div> 
</div> 

Nhưng:

<div class="action-price"></div> 
<div class="list-price">20000</div> 
<div class="sell-price">10000</div> 

Ai có thể giúp tôi không?

Cảm ơn,

Gabor

Answer 1

Bạn đang nghĩ đến các yếu tố như HTML, nhưng họ là những đối tượng. Bạn không thể thêm riêng thẻ bắt đầu và thẻ kết thúc vì chúng không phải là các phần tử hoàn chỉnh.

Thêm các yếu tố mới, và di chuyển divs hiện bên trong nó:

$('div.list-price').each(function() { 
    var newDiv = $('<div/>').addClass('action-price'); 
    $(this).before(newDiv); 
    var next = $(this).next(); 
    newDiv.append(this).append(next); 
}); 

Demo: http://jsfiddle.net/Guffa/eFXbN/1/

Answer 2

$first = ... // the 1st element 
$rest = ... // other elements, may be just the second one 
$first.wrap('<div class="wrapper"/>').parent().append($rest) 

Answer 3

tôi phải revese dòng cuối cùng của bạn để:

$ nghỉ ngơi. wrap (''). parent(). chắp thêm ($ đầu tiên);

Answer 4

Một cách tiếp cận tốt đẹp để làm điều này là thực hiện như sau.

$("div.list-price").each(function(){ 
    $(this).nextUntil("div.list-price").andSelf().wrapAll("<div class='action-price'></div>"); 
}); 

Đơn giản và dễ đọc của nó, có thể là cách mà nhà phát triển jQuery dự định viết.

Answer 5

Hãy thử sử dụng các chức năng wrapAll:

$('.list-price, .sell-price').wrapAll('<div class="action-price" />');