Thao tác "dữ liệu" từ thành công $ .ajax: chức năng (dữ liệu) {

Question

tôi có câu hỏi này và một câu hỏi đơn giản.

$.ajax({ 
    type: "POST", 
    url: "/", 
    data: $(".form").serialize(), 
    dataType: "html", 
    success: function (data) { 
     $("#id").html(data); 
    } 
}); 

Bên trong "dữ liệu" là một số html tôi chèn vào DOM. Đó là không có vấn đề. Nhưng tôi muốn thao tác "dữ liệu" trước khi làm như vậy. Làm thế nào tôi có thể làm điều đó? Ví dụ có một số phần tử li trong "dữ liệu". Làm thế nào tôi sẽ ví dụ xóa các phần tử li cuối cùng trong chuỗi "dữ liệu" trước khi chèn nó vào DOM?

tôi đã cố gắng một cái gì đó giống như

$(data li:last)remove(); 

... nhưng mà didnt làm việc.

Cảm ơn sự giúp đỡ của bạn.

Answer 1

Bạn không cần DIV bị ẩn. Nếu bạn muốn chuyển đổi chuỗi html thành đoạn DOM, chỉ cần gọi jQuery trên đó. Trong ví dụ của bạn:

success: function(data) { 
    var jqObj = jQuery(data); 
    jqObj.find("li:last").remove(); 
    $("#id").empty().append(jqObj); 
} 

Một số cân nhắc IE mặc dù:

• Nếu dữ liệu của bạn là lớn, jQuerifying nó tại chỗ chậm trong IE (ít nhất là với jQuery 1.2.6). Trong trường hợp đó, bạn có thể muốn tạo một vùng chứa cho nó như var div = jQuery("<div/>"); div.html(data); rồi thao tác nó ở đó trước khi thực hiện $("#id").html(div.html()).
• Nếu dữ liệu của bạn có HTML không hợp lệ (thẻ không được đính kèm, v.v.) bạn có thể gặp phải lỗi không ổn định trong IE. Chỉ cần đảm bảo html được định dạng đúng.

Answer 2

Dữ liệu được trả về là một chuỗi và không thể tìm thấy trong dom thông qua jQuery cho đến khi nó thực sự nằm trong DOM. Bạn sẽ cần phải phân tích chuỗi này và rút ra dữ liệu bạn yêu cầu hoặc chỉnh sửa sau khi bạn chèn vào DOM.

Answer 3

Jay's answer là đúng - trước tiên bạn sẽ cần chèn dữ liệu HTML vào DOM (hoặc phân tích cú pháp chuỗi có vẻ cồng kềnh). Những gì bạn có thể làm là nối dữ liệu vào một số DIV ẩn, sửa đổi nó, sau đó sao chép dữ liệu sang phần tử DOM khác hoặc chỉ hiển thị DIV

Answer 4

Bạn có thể tạo một đối tượng jQuery từ HTML tùy ý, ví dụ:

$('<ul><li>Item</li></ul>'); 

Vì vậy, bạn có thể làm một cái gì đó như thế này:

success: function(data) { 
    var $list = $(data); 

    $list.find('li:last').remove(); 

    // Do something with $list here, like append(). 
} 

Dưới đây là một ví dụ làm việc bạn có thể chơi xung quanh với trên JS Bin: http://jsbin.com/ejule3/edit