Search code examples
jqueryhtmlimagegalleria

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

This is my html (im using Galleria Image Gallery - JQuery Based)

<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 should be done with all (ie: four) img alt strings. 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 -->
Solution

  • Like so:

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