yếu tố di chuyển jquery đến vị trí con cuối cùng

Question

Giả sử tôi có một số <div> có chứa một số yếu tố ngẫu nhiên, nhưng có một phần tử tôi đã tạo bằng công cụ chọn duy nhất này: $('.myUniqueElement'). Tôi muốn sử dụng .insertAfter() để di chuyển yếu tố này ở vị trí con cuối cùng trong số <div> của tôi là có thể? Giải pháp là gì ?

Đây là giải pháp của tôi: http://jsfiddle.net/silverlight/RmB5K/3/ OK?

HTML:

<div class='p'> 
    <div class='myUniqueElement'>unique</div> 
    <div>item</div> 
    <div>item</div> 
    <div>item</div> 
</div> 
<input type='button' id='b' value='Do'/> 

Javascript:

$('#b').on('click',function(){ 
    $('.myUniqueElement').insertAfter($('.p :last-child')) 
}); 

CSS:

.myUniqueElement{color:red;} 

Answer 1

Hãy thử

var mydiv = $('my-div-selector'); 
mydiv.find('.myUniqueElement').appendTo(mydiv) 

hoặc đơn giản

$('my-div').append($('.myUniqueElement')) 

Answer 2

Để sử dụng insertAfter(), bạn phải biết các yếu tố sau đó bạn muốn di chuyển phần tử của bạn đến. Và như bạn nói bạn có các yếu tố ngẫu nhiên, và tất nhiên bạn không biết nguyên tố cuối cùng hiện tại, vì vậy ở đây bạn có thể làm gì.

Sao chép phần tử mà bạn muốn di chuyển và thêm phần tử đó vào phần tử gốc.

Mã jQuery trông như thế này:

$clone_elem = $('.myUniqueElement').clone(); 
$('.myUniqueElement').remove(); 
$('div').append($clone_elem); 

Thanh toán này fiddle

Answer 3

Vikas là đúng. Tuy nhiên, có lẽ cái này là một phiên bản cải tiến của nó kể từ khi các yếu tố gốc được lấy ra, không clone của nó ....

$elem = $('.myUniqueElement') 
    $('div').append($elem.clone()); 
    $elem.remove(); 

Answer 4

này là giải pháp của tôi và tôi nghĩ đây là cách tốt nhất tôi có thể sử dụng .insertAfter():

HTML:

<div class='p'> 
    <div class='myUniqueElement'>unique</div> 
    <div>item</div> 
    <div>item</div> 
    <div>item</div> 
</div> 
<input type='button' id='b' value='Do'/> 

jquery:

$('#b').on('click',function(){ 
    $('.myUniqueElement').insertAfter($('.p :last-child')) 
}); 

Vấn đề là :last-child và đây là fiddle: http://jsfiddle.net/silverlight/RmB5K/3/

Answer 5

Không có nhu cầu sử dụng .insertAfter. Bạn cũng nên không sử dụng .clone vì nó sẽ xóa mọi dữ liệu hoặc sự kiện được đính kèm trừ khi bạn sử dụng .clone(true).

Đơn giản chỉ cần sử dụng .appendTo để thêm các yếu tố mục tiêu đến div và nó sẽ được tách ra khỏi vị trí ban đầu của nó và thêm vào như là đứa trẻ cuối cùng của div:

$('.myUniqueElement').appendTo('#my-div');