Question

如何将div id标记放入数组中，然后使用循环输出图像的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>

我想将id“imageGallery”放入一个数组中，然后输出它的alt文本。

致Caius

我尝试了很多不同的变体。

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

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

有时它会一次打印1个字母，或者一次只打印一个字母，当我想要整套时。

我不记得我是否这样做了，因为我尝试了很多不同的版本而忘记保存，因为它不起作用。

Answer 1

// 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>

Answer 2

如果您希望使用jQuery从具有特定html标签的元素输出所有alt-text，您可以使用以下代码：

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>

Answer 3

你可以将img标签放入数组

var arr = $（$（$（＆＃34;＃imageGallery＆＃34;）。find（＆＃39; td＆＃39;））。find（＆＃39; img＆＃39;））; < / p>

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

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

Javascript：数组循环并输出文本

3 个答案: