Làm cách nào để có được đánh dấu của một phần tử, bao gồm cả chính nó bằng cách sử dụng jQuery?

Question

Tôi biết tôi có thể bọc nó .html() trong thẻ, nhưng bản thân phần tử có id, lớp, vv được thiết lập động. Làm thế nào để jQuery nhận được đánh dấu của phần tử bao gồm chính nó?

Answer 1

Theo như tôi biết, không có "outerHTML" hỗ trợ trực tiếp trong jQuery, nhưng bạn có thể viết một hàm để bắt chước nó (trong các trình duyệt khác ngoài IE), hoặc sử dụng this plugin:

// this will return the element and it's mark-up, of an element 
// with the id myTag 
var outer = $('#myTag').outerHTML(); 

Rõ ràng Brandon không phải là việc thực hiện chỉ .. tôi chắc chắn rằng bạn cũng có thể đưa ra triển khai thông minh khác ..

EDIT

Nếu bạn quan tâm đến việc tránh các cuộc gọi để phụ thêm, có thể bạn có thể thử một cái gì đó như thế này ..

function getOuterHTML(el) 
{ 
    var wrapper = ''; 

    if(el) 
    { 
     var inner = el.innerHTML; 
     var wrapper = '<' + el.tagName; 

     for(var i = 0; i < el.attributes.length; i++) 
     { 
      wrapper += ' ' + el.attributes[i].nodeName + '="'; 
      wrapper += el.attributes[i].nodeValue + '"'; 
     } 
     wrapper += '>' + inner + '</' + el.tagName + '>'; 
    } 
    return wrapper; 
} 


// now, to replicate the sample above 
var outer = getOuterHTML($('#myTag')); 

Điều duy nhất là, tôi không chắc chắn nếu tất cả các trình duyệt hỗ trợ các mảng thuộc tính .. nhưng tôi biết những mozilla-gia đình làm, và IE có hỗ trợ cho outerHTML .. cho nó một thử (cho những người không hỗ trợ mảng thuộc tính bạn có thể sử dụng phương pháp trước đó sử dụng phụ thêm)

Answer 2

This blog post có thể giúp bạn.

Ông mô tả một kỹ thuật mà trông như thế này:

var html = $('<div>').append($('#top').clone()).remove().html() 

này bắt chước div quan tâm, gắn nó vào một div wrapper, và sau đó nhận được html của wrapper - tương đương với html gốc div đầu tiên.

Đề xuất của anh ấy chỉ xung quanh nó ban đầu trong một div bao bọc được khai báo có vẻ như là một cách tốt hơn để đi. Sau đó, bạn sẽ không cần phải bận tâm với tất cả điều này.

Answer 3

Nếu không có mã nào, hãy chọn phần tử, chọn phần tử bên trong đầu tiên, lấy phần tử gốc (cái bạn muốn) rồi quấn nó quanh vùng chọn ban đầu từ youElement.html().

Answer 4

Uhm, bạn không cần phải sử dụng một plugin, tôi chắc chắn rằng bạn có thể thử

// this uses the jquery selectors, then returns the DOM element, 
// which then u can use the standard outterHTML... 
$('#myelement').get(0).outerHTML; 

Edit: nếu selectors jquery của bạn được phù hợp với nhiều hơn một mục, bạn có thể vòng qua chúng, tham khảo để các tài liệu jquery cho ví dụ

Answer 5

này sẽ làm việc tốt:

jQuery.fn.outer = function() { 
    return $($('<div></div>').html(this.clone())).html(); 
} 

Answer 6

nhỏ cuối cho câu hỏi này. Nếu bạn sử dụng jQuery để tìm một đối tượng, bạn có thể sử dụng đoạn mã sau để lấy mã HTML bên ngoài.

HTML:

<div class="obj"> 
    <a href="#" class="link">Link</a> 
</div> 

jQuery:

var $obj = $('.obj .link'); 
var outerHTML = $obj[0].outerHTML; 

Đó sẽ ra <a href="#" class="link">Link</a>. Thử nghiệm trên Chrome mới nhất, Firefox và IE11 mới nhất.Đây là một liên kết đến một codepen: http://codepen.io/aj372/pen/ZLmYbj