JQuery Получите все <alt>теги из <img>и покажите их в <ul><li>

Question

Это мой HTML (я использую Galleria Image Gallery - на основе JQuery)

<div id="galleria">
            <img alt="Productname 1" src="bens_img/1.jpg">
            <img alt="Productname 2" src="bens_img/2.jpg">
            <img alt="Productname 3" src="bens_img/3.jpg">
            <img alt="Guess what?" src="bens_img/4.jpg">
        </div>

Псевдокод

Get string from <alt> from <img>
Create a new <li> and paste the <alt> string from <img> in it

Это должно быть сделано со всеми (то есть: четырьмя) строками img alt. Это должно выглядеть так:

<ul class="textformat">
<li>Productname 1</li>
<li>Productname 2</li>
<li>Productname 3</li>
<li>Guess what?</li>
</ul> <!-- yeah this was all done by java-script -->

Answer 1

Вроде так:

$("#galleria > img").each(function(i, ele) {
  $(".textformat").append("<li>"+$(ele).attr("alt")+"</li>");
});

Answer 2

Вы можете расширить галерею, чтобы поместить теги или описания alt в другой div, не зная, как поместить его в li, какой-то jQuery, я думаю extend: function() { this.bind(Galleria.IMAGE, function(e) { $('.caption').html(this.$('info-description').html()); }) }

Answer 3

Попробуйте использовать функцию jQuery map():

$('#galleria img').map(function() {
  return '<li>' + this.alt + '</li>';
}).appendTo('ul.textformat');

Answer 4

Вам нужен селектор .attr jQuery:

$('#galleria > img').each(function(){
  $('.textformat').append('<li>'+ $(this).attr('alt') +'</li>');
});

Или вы можете использовать $('#galleria').find('img') или $('#galleria').children('img')

Answer 5

$("img[alt]")

для тега каждого изображения, имеющего 'alt'