2009-09-18 30 views
69

Có một/cách nhanh hơn dễ dàng hơn để có được yếu tố thêm vào sử dụng jQuery thêm:cách dễ dàng hơn để có được một đối tượng jQuery từ nối yếu tố

Làm thế nào để có được những yếu tố $ selectors:

$container.append('<div class="selectors"></div>'); 
var $selectors = $('.selectors', $container); 

tôi đã cố gắng :

var $selectors = $container.append('<div class="selectors"></div>'); 

nhưng mà làm cho $ selectors = $ chứa

có lẽ đó là/nhanh nhất b est cách. Chỉ cần kiểm tra.

Trả lời

138

Tại sao không chỉ:

var el = $('<div class="selectors"></div>'); 
$container.append(el); 

?

Sau đó, bạn có quyền truy cập 'el'.

+2

Hm. Điều gì xảy ra nếu '$ container' có nhiều phần tử trong trường hợp này? Trong trường hợp của tôi, tôi muốn nối thêm một cái gì đó cho tất cả các trường hợp một bộ chọn phù hợp và nhận được một tập hợp các phần tử được tạo ra. –

+1

điều này sẽ không hoạt động trên nhiều phiên bản của '$ container' http://jsfiddle.net/onL028ty/. Sử dụng mẹo 'appendTo' thay vì http://jsfiddle.net/6nmdh84e/ – ktutnik

56

Đây là cách tôi yêu thích để làm việc đó:

var $selectors = $('<div class="selectors"></div>').appendTo(container); 
+3

+1 - cũng vậy. Làm tất cả những gì bạn cần làm với phần tử mới được tạo trước khi thêm nó vào DOM. –

5
$selectors = $('<div/>').addClass('selectors').appendTo($container); 
+1

Thông tin tốt, cảm ơn. Đó là một chút tiết cho tôi so với các câu trả lời khác, nhưng tôi tự hỏi liệu nó có thực hiện tốt hơn không? Hiệu suất không phải là một vấn đề trong tình hình cụ thể của tôi, nhưng có thể cho những người khác. – slolife

2

Bạn cũng có thể tạo một hàm jQuery mới để làm điều đó:

jQuery.fn.addChild = function(html) 
{        
    var target = $(this[0])        
    var child = $(html);              
    child.appendTo(target);             
    return child;                
}; 

và sau đó sử dụng nó như vậy:

$('<ul>').addChild('<li>hi</li>'); 

tất nhiên nếu bạn muốn thêm nhiều hơn một mục:

var list = $('<ul>'); 
list.addChild('<li>item 1</li>'); 
list.addChild('<li>item 2</li>'); 

Ưu điểm của phương pháp tiếp cận như sau này là bạn có thể thêm nhiều chức năng "addChild" nếu muốn. Lưu ý rằng đối với cả hai ví dụ trên, bạn cần phải thêm phần tử vào tài liệu, do đó, ví dụ đầy đủ có thể là:

$('body').addChild('<ul>').addChild('<li>hi</li>'); 
+2

Tôi nghĩ phần cuối cùng của câu trả lời này chỉ thêm nhầm lẫn; gắn thêm vào tài liệu không phải là một phần của câu hỏi. Bạn có thể giữ cho nó thực sự đơn giản như cletus và có người đọc tưởng tượng $ container là một UL. $ container.append ('

  • hi
  • '); Dù sao, tuyệt vời. Cảm ơn. –

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