jQuery lấy HTML của hình ảnh làm chuỗi

Question

Làm cách nào để nhận được html của hình ảnh bằng jQuery?

Tôi muốn điều này là đầu ra:

<img src="pokerface.png" alt="pokerface" /> 

Tôi đang cố gắng với điều này, nhưng tôi nhận được một chuỗi rỗng (hoặc null):

var imageHtml = $("#user-dialog .product-item img").html(); 

Lợi nhuận các sau Đối tượng, nhưng tôi muốn html

var imageHtml = $("#user-dialog .product-item img") 

Làm cách nào để làm điều đó?

Nếu tôi thử với

var imageHtml = $("#user-dialog .product-item img").attr("src"); 

tôi nhận được đúng nguồn của hình ảnh (pokerface.png), vì vậy tôi biết đó là các yếu tố chính xác.

Answer 1

Nếu hình ảnh là yếu tố duy nhất bên trong container bạn có thể làm điều này:

$("#user-dialog .product-item img").parent().html(); 

Nếu không, bạn có thể tạo ra một yếu tố giả và thêm các đối tượng img với nó để có được những .html() giá trị.

$('<div>').append($("#user-dialog .product-item img").clone()).html(); 

Các giải pháp được đề xuất ở đây
How do you convert a jQuery object into a string?

Answer 2

jQuery("#user-dialog .product-item img").get(0).outerHTML; 

Answer 3

Bạn đang có hiệu quả tìm kiếm outerHTML (trong những trình duyệt có hỗ trợ nó):

var imageHtml = $("#user-dialog .product-item img").map(function(){ 
     return this.outerHTML; 
    }).get(); 

JS Fiddle demo.

Điều này tất nhiên sẽ trả về một mảng của mã HTML của phần tử img; cho phép jQuery để đối chiếu tất cả các thông tin có liên quan, chứ không phải lặp lại một cách rõ ràng thông qua các thiết lập phù hợp với get() hoặc sử dụng các chỉ số khung-ký hiệu [n]

Và một đơn giản (nghiêm túc, đó là rất đơn giản) plugin để lấy outerHTML của các yếu tố phù hợp:

(function ($) { 
    $.fn.htmlOuter = function() { 
     var self = this, 
      len = self.length, 
      _tmp = document.createElement('div'), 
      _h = []; 
     for (var i = 0; i < len; i++) { 
      _tmp.appendChild(self[i].cloneNode()); 
      _h.push(_tmp.innerHTML); 
      _tmp.innerHTML = ''; 
     } 

     return _h; 
    }; 
})(jQuery); 

var images = $('img').htmlOuter(); 
console.log(images); 

JS Fiddle demo.

Lưu ý rằng trả về trên một mảng, trong khi đó, thông thường, jQuery getters trả lại kết quả từ chỉ phần tử đầu tiên của một tập hợp, nếu đó là những gì bạn muốn thì bạn có thể làm thay đổi dòng cuối cùng của plugin :

return _h[0]; 

JS Fiddle demo.

Ồ, và rõ ràng (như .text() và các phương thức getter khác) không thể xích được, vì nó trả về một mảng hoặc một chuỗi (nếu bạn thích), không phải đối tượng jQuery là.

Tài liệu tham khảo:

• jQuery:
  • get().
  • map().
• 'Plain' JavaScript:
  • Array.push().
  • document.createElement().
  • Node.appendChild().
  • Node.cloneNode().
  • outerHTML.
  • outerHTML compatibility.