Javascript: Array loop and outputting text

Question

How do I put the div id tag into an array an then output the image's alt text using a loop?

For e.g., I have the following code...

<div id="imageGallery" style="left: 800px; position: absolute; top: 200px">
	<center>
		<table border="0" cellspacing="0" cellpadding="3">
		<tr>
			<td><a href="#"><img alt="Random Image 1" src="../Images/thumbnails/random1.jpg"
			style="border-color: #000000; border-width: 2px; border-style: ridge"></a></td>
			<td><a href="#"><img alt="Random Image 2" src="../Images/thumbnails/random2.jpg"
			style="border-color: #000000; border-width: 2px; border-style: ridge"></a></td>
			<td><a href="#"><img alt="Random Image 3" src="../Images/thumbnails/buckstb01.jpg"
			style="border-color: #000000; border-width: 2px; border-style: ridge"></a></td>
		</tr>
		</table>
		<table border="0" cellspacing="0" cellpadding="3">
		<tr>
			<td><center><a href="#"><img alt="Random Image 4" src="../Images/thumbnails/portrait.jpg"
			style="border-color: #000000; border-width: 2px; border-style: ridge"></a></center></td>
		</tr>
		</table>
	</center>
</div>

I would like to put the id "imageGallery" into an array and output it's alt text afterwards.

To Caius

I've tried so many different variations.

var imageGallery = [ $( "#imageGallery img" ) ];

for( i = 0; i <= imageGallery.length; i++ )
{
     $( "#imageGallery" ).attr( "alt" );
}

Sometimes it would print out 1 letter at a time or just one set at a time, when I want the whole set.

I can't remember if I did it this way as I tried so many different variations and forgot to save it as it didn't work.

Please quit trying to edit blex's answer into an updated question. Leave a comment if you need clarification on the answer, or edit your question if it needs updating. — Paul Roub
– Paul Roub, Commented Aug 3, 2016 at 18:42

blex · Accepted Answer · 2016-08-01 16:43:13Z

// Here is the Array
var images = document.querySelectorAll('#imageGallery img');

for(var i = 0; i < images.length; i++){
  // Output the alt's in a loop
  console.log(images[i].getAttribute('alt'));
}

<div id="imageGallery" style="left: 800px; position: absolute; top: 200px">
	<center>
		<table border="0" cellspacing="0" cellpadding="3">
		<tr>
			<td><a href="#"><img alt="Random Image 1" src="../Images/thumbnails/random1.jpg"
			style="border-color: #000000; border-width: 2px; border-style: ridge"></a></td>
			<td><a href="#"><img alt="Random Image 2" src="../Images/thumbnails/random2.jpg"
			style="border-color: #000000; border-width: 2px; border-style: ridge"></a></td>
			<td><a href="#"><img alt="Random Image 3" src="../Images/thumbnails/buckstb01.jpg"
			style="border-color: #000000; border-width: 2px; border-style: ridge"></a></td>
		</tr>
		</table>
		<table border="0" cellspacing="0" cellpadding="3">
		<tr>
			<td><center><a href="#"><img alt="Random Image 4" src="../Images/thumbnails/portrait.jpg"
			style="border-color: #000000; border-width: 2px; border-style: ridge"></a></center></td>
		</tr>
		</table>
	</center>
</div>

TrampolineTales · Accepted Answer · 2016-08-01 16:44:48Z

If you wish to output all the alt-text from elements with a specific html tag using jQuery, you could do so with the following code:

var $elements = $('img'); //replace 'img' with whichever tag you want to use
for (var i = 0; i < $elements.length; i++) {
  console.log($($elements[i]).attr('alt'));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="imageGallery" style="left: 800px; position: absolute; top: 200px">
	<center>
		<table border="0" cellspacing="0" cellpadding="3">
		<tr>
			<td><a href="#"><img alt="Random Image 1" src="../Images/thumbnails/random1.jpg"
			style="border-color: #000000; border-width: 2px; border-style: ridge"></a></td>
			<td><a href="#"><img alt="Random Image 2" src="../Images/thumbnails/random2.jpg"
			style="border-color: #000000; border-width: 2px; border-style: ridge"></a></td>
			<td><a href="#"><img alt="Random Image 3" src="../Images/thumbnails/buckstb01.jpg"
			style="border-color: #000000; border-width: 2px; border-style: ridge"></a></td>
		</tr>
		</table>
		<table border="0" cellspacing="0" cellpadding="3">
		<tr>
			<td><center><a href="#"><img alt="Random Image 4" src="../Images/thumbnails/portrait.jpg"
			style="border-color: #000000; border-width: 2px; border-style: ridge"></a></center></td>
		</tr>
		</table>
	</center>
</div>

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

you can get the img tags into array

var arr = $($($("#imageGallery").find('td')).find('img'));

$.each(arr,function(i,data){

$(data).attr('alt')
})

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 1, 2016 at 17:13

Akshay

8057 silver badges16 bronze badges

Collectives™ on Stack Overflow

Javascript: Array loop and outputting text

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related