使用jQuery获取数组中的所有图像? [英] Get inside all images in array using jquery?
本文介绍了使用jQuery获取数组中的所有图像?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
HTML
<div class="cms-featuredbox">
<div class="category-title">
<img alt="" src="http://localhost/project/lulupu/skin/frontend/default/lulupu/images/featured_products_title.png">
</div>
<div class="listing-type-grid catalog-listing">
<div id="slider" style="width: 663px; height: 325px; overflow: hidden;">
<ul style="width: 1989px; margin-left: -625.437px;">
<li class = "test" style="margin-left: -663px; float: left;"><div class="tab2" id="featured-product">
<div class="featured-product-top"></div>
<div class="featured-bg" style="width:310px;float:left;text-align:center;">
<div><a title="The Magnet Source™ Magnet Tape 1/2"x 30"" href="http://localhost/project/lulupu/index.php/featured/the-magnet-sourcetm-magnet-tape-1-2-x-30.html">
<img width="260" height="260" alt="The Magnet Source™ Magnet Tape 1/2"x 30"" src="http://localhost/project/lulupu/media/catalog/product/cache/1/small_image/260x260/9df78eab33525d08d6e5fb8d27136e95/m/a/magent.jpg">
</a> </div>
</div>
<div class="featured-product-body">
<div style="width:322px;float:right;padding:6px;">
<div class="protilte">The Magnet Source™ Magnet Tape 1/2"x 30"</div>
<p>Magnetic products. Tape 1/2"x 30"- Gives you a quick and easy way to add a magnet to lightweight craft projects. Easy as 1-2-3, cut to length, peel off adhesive liner and apply to craft project. It cuts easily with scissors.</p>
<a title="The Magnet Source™ Magnet Tape 1/2"x 30"" href="http://localhost/project/lulupu/index.php/featured/the-magnet-sourcetm-magnet-tape-1-2-x-30.html" class="knowmore">Know More</a>
</div></div>
<div class="clr"></div>
<div class="featured-product-btm"></div>
</div>
</li>
<li style="float: left;"><div class="tab1" id="featured-product">
<div class="featured-product-top"></div>
<div class="featured-bg" style="width:310px;float:left;text-align:center;">
<div><a title="VersaMark Watermark Ink Stamp Pad Large Dazzle Frost" href="http://localhost/project/lulupu/index.php/featured/versamark-watermark-ink-stamp-pad-large-dazzle-frost.html">
<img width="260" height="260" alt="VersaMark Watermark Ink Stamp Pad Large Dazzle Frost" src="http://localhost/project/lulupu/media/catalog/product/cache/1/small_image/260x260/9df78eab33525d08d6e5fb8d27136e95/f/r/frostdazzle_0.jpg">
</a> </div>
</div>
<div class="featured-product-body">
<div style="width:322px;float:right;padding:6px;">
<div class="protilte">VersaMark Watermark Ink Stamp Pad Large Dazzle Frost</div>
<p>Making your mark has never been easier! VersaMark™ watermark/resist ink gives you unique options for the distinction you've been looking for. Simply stamp your image onto paper and explore the possibilities of watermarking your own stationary or subtle tone-on-tone designs. Plus, VersaMark™ performs well as a resist ink. VersaMark™ - the versatility is in the ink! Refill available. Large Dazzle Frost- Dazzle combines all the great qualities of the original VersaMark™ with added shimmer to give your paper projects an easy touch of elegance.</p>
<a title="VersaMark Watermark Ink Stamp Pad Large Dazzle Frost" href="http://localhost/project/lulupu/index.php/featured/versamark-watermark-ink-stamp-pad-large-dazzle-frost.html" class="knowmore">Know More</a>
</div></div>
<div class="clr"></div>
<div class="featured-product-btm"></div>
</div></li>
<li style="float: left;"><div class="tab2" id="featured-product">
<div class="featured-product-top"></div>
<div class="featured-bg" style="width:310px;float:left;text-align:center;">
<div><a title="The Magnet Source™ Magnet Tape 1/2"x 30"" href="http://localhost/project/lulupu/index.php/featured/the-magnet-sourcetm-magnet-tape-1-2-x-30.html">
<img width="260" height="260" alt="The Magnet Source™ Magnet Tape 1/2"x 30"" src="http://localhost/project/lulupu/media/catalog/product/cache/1/small_image/260x260/9df78eab33525d08d6e5fb8d27136e95/m/a/magent.jpg">
</a> </div>
</div>
<div class="featured-product-body">
<div style="width:322px;float:right;padding:6px;">
<div class="protilte">The Magnet Source™ Magnet Tape 1/2"x 30"</div>
<p>Magnetic products. Tape 1/2"x 30"- Gives you a quick and easy way to add a magnet to lightweight craft projects. Easy as 1-2-3, cut to length, peel off adhesive liner and apply to craft project. It cuts easily with scissors.</p>
<a title="The Magnet Source™ Magnet Tape 1/2"x 30"" href="http://localhost/project/lulupu/index.php/featured/the-magnet-sourcetm-magnet-tape-1-2-x-30.html" class="knowmore">Know More</a>
</div></div>
<div class="clr"></div>
<div class="featured-product-btm"></div>
</div>
</li>
<li style="float: left;"><div class="tab1" id="featured-product">
<div class="featured-product-top"></div>
<div class="featured-bg" style="width:310px;float:left;text-align:center;">
<div><a title="VersaMark Watermark Ink Stamp Pad Large Dazzle Frost" href="http://localhost/project/lulupu/index.php/featured/versamark-watermark-ink-stamp-pad-large-dazzle-frost.html">
<img width="260" height="260" alt="VersaMark Watermark Ink Stamp Pad Large Dazzle Frost" src="http://localhost/project/lulupu/media/catalog/product/cache/1/small_image/260x260/9df78eab33525d08d6e5fb8d27136e95/f/r/frostdazzle_0.jpg">
</a> </div>
</div>
<div class="featured-product-body">
<div style="width:322px;float:right;padding:6px;">
<div class="protilte">VersaMark Watermark Ink Stamp Pad Large Dazzle Frost</div>
<p>Making your mark has never been easier! VersaMark™ watermark/resist ink gives you unique options for the distinction you've been looking for. Simply stamp your image onto paper and explore the possibilities of watermarking your own stationary or subtle tone-on-tone designs. Plus, VersaMark™ performs well as a resist ink. VersaMark™ - the versatility is in the ink! Refill available. Large Dazzle Frost- Dazzle combines all the great qualities of the original VersaMark™ with added shimmer to give your paper projects an easy touch of elegance.</p>
<a title="VersaMark Watermark Ink Stamp Pad Large Dazzle Frost" href="http://localhost/project/lulupu/index.php/featured/versamark-watermark-ink-stamp-pad-large-dazzle-frost.html" class="knowmore">Know More</a>
</div></div>
<div class="clr"></div>
<div class="featured-product-btm"></div>
</div>
</li>
</ul>
</div><ol id="controls">
<li id="controls1" class="current"><a href="javascript:void(0);" rel="0">1</a></li><li id="controls2" class=""><a href="javascript:void(0);" rel="1">2</a></li></ol>
</div></div>
jQuery
var tn_array = $("#slider ul li img").map(function() {
return $(this).attr("src");
});
for (var i=0; i<tn_array.length; i++) {
alert(tn_array[i]);
}
我没有得到图像阵列吗?
I didnt get images array?
推荐答案
使用.each()遍历找到的每个元素.
Use .each() to iterate through each element found.
例如:
$( "#slider ul li img" ).each(function( index ) {
console.log( index + ": " + $(this).src() );
});
您的数组映射也可以正常工作，我认为您正在加载文档之前进行迭代
edit:Your array map also works fine i think your are iterating before document is loaded
$(document).ready(function(){
var tn_array = $("#slider ul li img").map(function() {
return $(this).attr("src");
});
for (var i=0; i<tn_array.length; i++) {
alert(tn_array[i]);
}
});
这篇关于使用jQuery获取数组中的所有图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
