2012-06-20 26 views
14

Tôi tò mò tại sao jQuery's .after() không chuỗi, hoặc "cung cấp cho bạn", phần tử mới mà bạn tạo ra với nó. Dường như với tôi như nó nên, nhưng tôi không có chuyên gia và hy vọng ai đó có thể làm sáng tỏ một số lý do tại sao đó là một ý tưởng tồi. Dưới đây là một ví dụ để thấy những gì tôi muốn từ .Sau():Tại sao jQuery. Sau khi() không chuỗi yếu tố mới?

Dưới đây là một số đánh dấu:

<div id="content1"> 
    <p id="hello1">Hello</p> 
</div> 
<div id="content2"> 
    <p id="hello2">Hello</p> 
</div> 

Dưới đây là những gì tôi muốn, nhưng điều này thay thế "Hello" với "thế giới!":

$('#hello1').after('<p />').text('World!'); 

này không được công việc, nhưng nó chắc chắn là xấu xí:

$('#hello2').after('<p />'); 
var $newParagraph = $('#content2 p').last(); 
$newParagraph.text('World'); 

Đây là đẹp hơn, nhưng tôi không hoàn toàn bán: (có lẽ tôi shoul d được?)

$('#hello1').after($('<p />').text('World')); 

Chú giải này rõ ràng là một ví dụ đơn giản, đó là, "<p> thế giới! </p > "not what tôi muốn thêm là, vấn đề thế giới thực của tôi là phức tạp hơn thế.

Thanks cho bất kỳ suy nghĩ.

+0

kết quả mong đợi của bạn là gì? –

+0

Ok vậy có ai biết cách tốt nhất để lấy phần tử bạn thêm qua sau() không? – Tim

Trả lời

20

lẽ .after() công trình vì nó không để cho phép bạn chuỗi nhiều phương pháp đó sẽ áp dụng đối với thành phần được chọn ban đầu (s):

$('#hello1').after($('<p />').text('World')) 
      .before($('<p />').text('Before text')) 
      .remove(); 

Điều này sẽ giúp các hành vi phù hợp với các phương pháp khác, vì vậy bạn không phải cố gắng nhớ cái nào trả về đối tượng gốc và trả về một số đối tượng khác.

Lưu ý rằng trong trường hợp của bạn $('#hello1') chọn đúng một phần tử kể từ khi bạn được chọn bởi id, nhưng bạn có thể áp dụng .after() đến một đối tượng jQuery chứa nhiều yếu tố để thêm (nhân bản) nội dung sau nhiều yếu tố:

$('div.someclass').after($('<p/>').text('whatever')); 

Trong trường hợp này theo ý kiến ​​của tôi, nó chắc chắn có ý nghĩa để giữ cho bối cảnh chuỗi là đối tượng jQuery ban đầu.

Các .insertAfter() method có thể gần gũi hơn với những gì bạn muốn:

$('<p/>').insertAfter('#hello1').text('World'); 

(Nó cũng trả về jQuery object, nó được áp dụng cho, nhưng nó chèn trong "đảo ngược".)

Bạn có thể viết phương thức plugin của riêng bạn để trả về phần tử được thêm vào, nhưng điều đó sẽ gây nhầm lẫn vì nó sẽ làm việc ngược lại với tất cả các phương thức chuẩn.

+0

Vâng, tôi được bán, chỉ là một trong những điều thú vị để đi qua. Cảm ơn :) – Bung

+1

không cần phải quấn '# hello1' trong ví dụ' .insertAfter'. – Alnitak

+0

Điểm tốt @Alnitak - câu trả lời được cập nhật. – nnnnnn

3

Đó chỉ là cách nó là đối với hầu hết các phương pháp jQuery. Sẽ tốt hơn cho jQuery . để phù hợp và trả lại đối tượng gốc

việc sửa chữa là:

$('#hello1').after(
    $('<p/>', { text: 'World!' }) 
); 

hay:

$('#hello1').after(
    $('<p/>').text('World!') 
); 

hoặc thậm chí:

$('<p/>').text('World!').insertAfter('#hello1'); 

Sau đó có thể thực sự được ưa thích vì nó sau đó tiếp tục chuỗi từ các yếu tố mới <p>.

+0

Cảm ơn, có ý nghĩa, tôi đã chọn câu trả lời khác vì nó là một chi tiết cảm động hơn, nhưng điều này là như nhau. – Bung

+0

@Bạn upvotes cho câu trả lời tốt vẫn được đánh giá cao ... – Alnitak

0

Nó không cung cấp cho bạn phần tử được tạo vì bạn không phải lúc nào cũng tạo thành phần tử, nó sẽ đòi hỏi một số lượng đáng kể sức mạnh xử lý cho JQuery để phát hiện rằng một phần tử được tạo ra và luôn có ý nghĩa hơn có nó trả lại phù thủy yếu tố là mục tiêu của chiến dịch.

Các vấn đề liên quan