.attr() get <img> content

Question

У меня есть приложение, использующее JQuery UI. для создания списка перетаскиваемых списков перетаскивания. Эти изображения вставляются в <li><ul>. Через приведенный ниже код я могу выполнить цикл, получая содержимое каждого перечисленного li, но не содержимое тега <img>.

$(function() { 
$("#sortable").sortable(); 
$("#sortable").disableSelection(); 
$("#savebutton").click(function() { LISTOBJ.saveList(); }); 
}); 

var LISTOBJ = { 
    saveList: function() { 
     var listCSV = ""; 
     $("#sortable li").each(function() { 
      if (listCSV === "") { 
       listCSV = $(this).text(); 
      } else { 
       listCSV += "," + $(this).text(); 
      } 
      $("#output").text(listCSV); 
      $("#hiddenListInput").val(listCSV); 
      //$("#listsaveform").submit(); 
     }); 
    } 
} 

Мой вопрос - Почему я могу видеть содержимое <li>, но не из IMG тега внутри него? Я верю, что ответ лежит где-то в добавлении .attr() к .each, но я не могу понять это.

Кто-нибудь знает, что мне не хватает, или если я даже на правильном пути?

Answer 1

Вы должны использовать html() вместо text() для того, чтобы получить все <img> тег

 if (listCSV === "") { 
      listCSV = $(this).html(); 
     } else { 
      listCSV += "," + $(this).html(); 
     } 

или если вы хотите только атрибут src

 if (listCSV === "") { 
      listCSV = $(this).find('img').attr('src'); 
     } else { 
      listCSV += "," + $(this).find('img').attr('src'); 
     }