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]);
}
我没有得到图像阵列?
答案 0 :(得分:3)
使用.each()
遍历找到的每个元素。
例如:
$( "#slider ul li img" ).each(function( index ) {
console.log( index + ": " + $(this).src() );
});
编辑:您的数组映射也可以正常工作我认为您在加载文档之前正在迭代
$(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]);
}
});
答案 1 :(得分:2)
你需要使用.get(),因为&gt; map()返回一个jQuery对象而不是一个数组
var tn_array = $("#slider ul li img").map(function() {
return $(this).attr("src");
}).get();
答案 2 :(得分:1)
尝试
var tn_array = [];
$( "#slider ul li img" ).each(function() {
tn_array.push($(this).attr("src"));
});