jQuery append () - trả về các phần tử được nối thêm

188

Tôi đang sử dụng jQuery.append () để thêm một số phần tử động. Có cách nào để có được một bộ sưu tập jQuery hoặc mảng các phần tử mới được chèn này không?

Vì vậy, tôi muốn làm điều này:

$("#myDiv").append(newHtml);
var newElementsAppended = // answer to the question I'm asking
newElementsAppended.effects("highlight", {}, 2000);

jquery

— tâm thần
nguồn

4

có thể trùng lặp cách dễ dàng hơn để có được một đối tượng jQuery từ phần tử được nối thêm

— màu xanh lam

263

Có một cách đơn giản hơn để làm điều này:

$(newHtml).appendTo('#myDiv').effects(...);

Đây lượt những thứ xung quanh bằng cách tạo ra đầu tiên newHtmlvới jQuery(html [, ownerDocument ]), và sau đó sử dụng appendTo(target)(lưu ý " To" bit) để thêm rằng nó đến cuối #mydiv.

Bởi vì bây giờ bạn bắt đầu với $(newHtml)kết quả cuối cùng của appendTo('#myDiv')là bit mới của html, và .effects(...)cuộc gọi sẽ được trên đó mới chút html quá.

— SLaks
nguồn

2

Sử dụng jQuery UI phiên bản 1.9.2 Tôi nhận effectsđược không phải là một chức năng ... nhưng effectlà

— Philipp M

Tôi sẽ thêm rằng còn có một chữ ký khác: appendTo (đích, bối cảnh). Chẳng hạn như đối với bất kỳ bộ chọn jQuery nào, nó cho phép tìm kiếm mục tiêu, NHƯNG chỉ trong một bối cảnh cụ thể. Nó có thể rất hữu ích nếu bạn viết plugin hoặc thư viện.

— Pierpaolo Cira

1

Điều này sẽ gây ra lỗi nếu newHtml không phải là HTML hợp lệ hoặc bộ chọn jQuery hợp lệ:$('/ This is Not HTML /').appendTo('#myDiv') kết quả trong Uncaught Error: Syntax error, unrecognized expressionkhi $('#myDiv').append('/ This is Not HTML /')hoạt động chính xác bằng cách nối thêm văn bản vào phần tử đích.

— Thomas CG de Vilhena

40

// wrap it in jQuery, now it's a collection
var $elements = $(someHTML);

// append to the DOM
$("#myDiv").append($elements);

// do stuff, using the initial reference
$elements.effects("highlight", {}, 2000);

— karim79
nguồn

2

Điều này không hiệu quả với tôi khi sau đó tôi đã cố gắng liên kết một sự kiện với phần tử được nối thêm. Tôi đã sử dụng var appendsTarget = $ (newHtml) .appendTo (phần tử). Sau đó tôi có thể liên kết bằng cách sử dụng $ (appendsTarget) .bind ('keydown', someFunc)

— Zac Imboden

Tôi nghĩ rằng nó là $elements.effect("highlight", {}, 2000);, không effects.

— tại sao

2

Điều này không hoạt động vì biến phần tử $ sau khi được thêm vào, thay đổi và không còn khả dụng.

— Alex V

@AlexV Điều này có vẻ hiệu quả, xem bản demo trực tiếp trên jsbin.com/xivingohofi/1/edit?html,js,output , cũng xem câu trả lời tương tự như được chấp nhận cho stackoverflow.com/questions/1443233/

— Adrien Be

2

Có vẻ như họ đã sửa lỗi này trong các phiên bản mới hơn của jQuery.

— Alex V

30

var newElementsAppended = $(newHtml).appendTo("#myDiv");
newElementsAppended.effects("highlight", {}, 2000);

— Thiago Belem
nguồn

10

Một lời nhắc nhở chút , khi yếu tố được thêm tự động, chức năng giống như append(), appendTo(), prepend()hoặc prependTo()trả về một đối tượng jQuery, không phải là phần tử HTML DOM.

BẢN GIỚI THIỆU

var container=$("div.container").get(0),
    htmlA="<div class=children>A</div>",
    htmlB="<div class=children>B</div>";

// jQuery object
alert( $(container).append(htmlA) ); // outputs "[object Object]"

// HTML DOM element
alert( $(container).append(htmlB).get(0) ); // outputs "[object HTMLDivElement]"

— AglessEssence
nguồn

19

Phần tử được trả về từ append () là vùng chứa chứ không phải phần tử mới.

— Tomas

0

Tôi nghĩ bạn có thể làm một cái gì đó như thế này:

var $child = $("#parentId").append("<div></div>").children("div:last-child");

#ParentId cha được trả về từ phần bổ sung, vì vậy hãy thêm truy vấn con jquery vào nó để đưa div con cuối cùng được chèn vào.

$ child sau đó là div divququ quấn con đã được thêm vào.

— chuyện
nguồn