JQuery Get all <alt> tags with <img> and show them in <ul> <li>

This is my html (im using the Galleria image gallery - based on 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>

Pseudo code

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

This needs to be done with all (i.e. four) img alt lines. It should look like this:

<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 -->
+3
source share
5 answers

Same:

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

for a tag for each image that has "alt"

0
source

.attr jQuery:

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

$('#galleria').find('img') $('#galleria').children('img')

0

jQuery map():

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

galleria, alt div, , li, jQuery, extend: function() { this.bind(Galleria.IMAGE, function(e) { $('.caption').html(this.$('info-description').html()); }) }

0

Source: https://habr.com/ru/post/1776169/


All Articles