Cách lấy Phần tử DOM từ Bộ chọn JQuery

Question

Tôi đang gặp phải một thời gian khó khăn để tìm ra DOMElement thực tế từ bộ chọn jquery. Mã mẫu:

<input type="checkbox" id="bob" /> 
    var checkbox = $("#bob").click(function() { //some code }) 

và trong một đoạn mã khác Tôi đang cố gắng xác định giá trị đã chọn của hộp kiểm.

if (checkbox.eq(0).SomeMethodToGetARealDomElement().checked) 
    //do something. 

Và xin vui lòng, tôi không muốn làm:

if (checkbox.eq(0).is(":checked")) 
    //do something 

Điều đó có được là tôi xung quanh hộp kiểm, nhưng đôi khi tôi đã cần sự DOMElement thực.

Answer 1

Bạn có thể truy cập vào các phần tử DOM liệu với:

$("table").get(0); 

hoặc đơn giản hơn:

$("table")[0]; 

Không thực sự là rất nhiều bạn cần điều này cho tuy nhiên (theo kinh nghiệm của tôi). Hãy ví dụ hộp kiểm của bạn:

$(":checkbox").click(function() { 
    if ($(this).is(":checked")) { 
    // do stuff 
    } 
}); 

là nhiều hơn "jquery'ish" và (IMHO) súc tích hơn. Nếu bạn muốn đánh số chúng thì sao?

$(":checkbox").each(function(i, elem) { 
    $(elem).data("index", i); 
}); 
$(":checkbox").click(function() { 
    if ($(this).is(":checked") && $(this).data("index") == 0) { 
    // do stuff 
    } 
}); 

Một số tính năng này cũng giúp mặt nạ khác biệt trong trình duyệt. Một số thuộc tính có thể khác nhau. Ví dụ cổ điển là các cuộc gọi AJAX. Để làm điều này đúng trong Javascript thô có khoảng 7 trường hợp dự phòng cho XmlHttpRequest.

Answer 2

Nếu bạn cần tương tác trực tiếp với phần tử DOM, tại sao không sử dụng document.getElementById vì nếu bạn đang cố gắng tương tác với một yếu tố cụ thể, bạn có thể biết id, giả sử rằng tên lớp chỉ có một phần tử hoặc một số tùy chọn khác có xu hướng rủi ro.

Nhưng, tôi có xu hướng đồng ý với những người khác, rằng trong hầu hết các trường hợp, bạn nên học cách làm những gì bạn cần bằng cách sử dụng những gì jQuery cung cấp cho bạn, vì nó rất linh hoạt.

UPDATE: Dựa trên một bình luận: Đây là một bài với một lời giải thích tốt đẹp: http://www.mail-archive.com/jquery-en@googlegroups.com/msg04461.html

$(this).attr("checked") ? $(this).val() : 0 

này sẽ trả về giá trị nếu nó được đánh dấu, hoặc 0 nếu nó không.

$(this).val() chỉ tiếp cận vào vị trí cũ và nhận thuộc tính "giá trị" của phần tử, cho dù có được kiểm tra hay không.

Answer 3

Chỉnh sửa: có vẻ như tôi đã sai khi giả sử bạn không thể lấy yếu tố. Như những người khác đã đăng ở đây, bạn có thể tải xuống bằng:

$('#element').get(0); 

Tôi đã xác minh điều này thực sự trả lại phần tử DOM đã được đối sánh.

Answer 4

Tôi cần lấy phần tử làm chuỗi.

jQuery("#bob").get(0).outerHTML; 

Mà sẽ cung cấp cho bạn một cái gì đó như:

<input type="text" id="bob" value="hello world" /> 

... như là một chuỗi chứ không phải là một phần tử DOM.