Tại sao jQuery không ẩn một số HTML nhất định?

Tôi đã chạy đầu vào một bức tường cố gắng tìm ra điều này. Lấy body HTML sau:Tại sao jQuery không ẩn một số HTML nhất định?

<body> 
<div id="project"> 
    <h1>Hi</h1> 
    <h2>Hello</h2> 
</div> 
</body>

Và mã jQuery sau:

$(function(){ 
    var h = $('#project').html(); 
    $('#project').remove(); 
    $(h).hide().appendTo('body'); 
    alert("Created HTML, hide, and appended!"); 
});

Phần $(h).hide() gây jQuery để ném một ngoại lệ trong Safari 4 và Firefox 3.5.

Safari:TypeError: Result of expression 'this[a].style' [undefined] is not an object.
Firefox:uncaught exception: [Exception... "Could not convert JavaScript argument arg 0" nsresult: ...]

Khi tôi thay đổi HTML để chỉ chứa một trong hai tiêu đề (nếu bạn loại bỏ các <h1> hoặc <h2> từ HTML, kịch bản chạy thành công. Tại sao điều này?

Để tự mình thử nghiệm, hãy xem http://jsbin.com/avisi/edit

Chỉnh sửa: Tôi không thực sự cố gắng loại bỏ và phần tử từ DOM và chèn lại nó bằng cách sao chép HTML. Đây chỉ là một trường hợp thử nghiệm cho một lỗi tôi đang gặp phải trong mã phức tạp hơn, và tôi đang cố gắng hiểu tại sao lỗi này xảy ra. Tôi đồng ý rằng, nếu tôi muốn hoàn thành những gì được hiển thị ở đây, tôi sẽ sử dụng một số thứ như $('#project').remove().children().appendTo('body')

Nguồn

2010-02-19 Ryan

Tôi không thể lặp lại lỗi lầm của mình trong Firefox. Tuy nhiên, bạn có thể muốn thử làm sạch nó lên như sau:

$('#project').remove().children().appendTo('body').hide();

hỏng xuống, đây là những gì đang xảy ra

// Get the `project` container 
$('#project') 
    // Remove it from the page 
    .remove() 
    // Get its children (the h1, h2, etc) 
    .children() 
    // Append those nodes to the body 
    .appendTo('body') 
    // Hide those nodes 
    .hide();

Những người khác đang đề xuất rằng .hide() đang gây ra những vấn đề kể từ khi nút đó nó đang được áp dụng cho không phải là một phần của tài liệu chính; tuy nhiên, đây không phải là trường hợp. Miễn là bạn duy trì tham chiếu đến bất kỳ nút nào, bạn có thể ảnh hưởng đến thuộc tính kiểu của nó (qua hide, show, v.v.).

Một điều bạn có thể muốn kiểm tra là đảm bảo rằng $('#project') thực sự trả về nút (nếu có) mong đợi. Vấn đề có thể phát sinh khác.

Vì vậy, tôi đã tìm hiểu về Safari và tìm thấy sự cố của bạn. Đây là một bãi chứa từ bảng điều khiển dành cho nhà phát triển.

> var h = $('#project').html(); 
undefined 
> var t = $(h); 
undefined

Cho đến giờ, rất tốt. undefined đây chỉ đơn giản có nghĩa là báo cáo kết quả (báo cáo kết quả var) không có giá trị trả về (mà nó không)

> t.hide() 
ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js:131TypeError: Result of expression 'this[a].style' [undefined] is not an object.

Đây là lỗi mà bạn mô tả.Kiểm tra từng hạng mục trong đối tượng jQuery sẽ tiết lộ những lỗi dưới đây

> t[0] 
<h1 style="display: none; ">Hi</h1>

Tốt ...

> t[1] 
(whitespace)

Chết tiệt. Có thật không? Đây là vấn đề. các khoảng trắng không có thuộc tính style, đó là nguyên nhân gây ra sự cố.

> t[2] 
<h2>Hello</h2>

Đây là lý do sao chép HTML của nút này sang nút khác chỉ để di chuyển các nút đó là kỹ thuật xấu. Tôi đề nghị bạn sử dụng đoạn mã mà tôi đã cung cấp ở trên.

Nguồn

2010-02-19 09:18:17

Tôi đồng ý rằng đây là cách dọn dẹp và chèn lại các nút được đề cập rõ ràng hơn nhiều. Những gì tôi đang cố gắng để hiểu là lý do tại sao (ít nhất là trong bản sao của tôi của Firefox 3.5 và Safari 4), mã trên gây ra lỗi. – Ryan

Tôi đã tìm ra nguyên nhân và đã cập nhật câu trả lời của mình. –

Justin, cảm ơn vì đã điều tra điều này. Tôi chắc rằng tôi có thể sử dụng điều này để giải quyết vấn đề ban đầu của tôi, cố gắng ẩn và chèn một đoạn HTML nhận được từ máy chủ (đó là lý do tại sao '.remove()' ... '.append()' không phải là một tùy chọn - không có gì để xóa). – Ryan

-1

Bạn đã xóa nội dung khỏi DOM trước đó, vì vậy không có gì để ẩn. Nếu bạn muốn làm

$(h).appendTo('body').hide();

nó nên làm việc

Nguồn

2010-02-19 09:11:08 harpax

Có điều gì đó cần ẩn. Chỉ vì nút đã được gỡ bỏ khỏi tài liệu không có nghĩa là nó không tồn tại và nó không thể có các thao tác kiểu được thực hiện trên nó. –

bạn là chính xác, mặc dù tôi không hoàn toàn hiểu những gì làm tăng lỗi sau đó .. – harpax

Xem câu trả lời cập nhật của tôi. –

Có một nút văn bản được chọn trong $ (h). Chúng tôi có thể lọc ra bằng cách sử dụng chức năng lọc mặc dù.

này nên làm việc (tôi đã chỉ được thử nghiệm trong FF dù):

$(function(){ 
    var h = $('#project').html(); 
    $('#project').remove(); 
    $(h).filter("*").hide().appendTo('body'); 

alert("Created HTML, hide, and appended!"); 
});

hành vi Khá lạ IMO.

Nguồn

2010-02-19 12:15:56

Hành vi không may nhưng được mong đợi. Nếu bạn tạo các nút DOM từ một chuỗi HTML, khoảng trống giữa các nút được chuyển đổi thành các nút văn bản. Điều này thường gây ra vấn đề, đó là lý do tại sao kỹ thuật này đôi khi là tốt nhất để tránh, đặc biệt là cho các mục đích của OP. –

Tại sao jQuery không ẩn một số HTML nhất định?

Trả lời

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