jquery - 使用 jquery 获取数组中的所有图像？

Question

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&trade; Magnet Tape 1/2&quot;x 30&quot;" 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&trade; Magnet Tape 1/2&quot;x 30&quot;" 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&trade; 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&trade; Magnet Tape 1/2&quot;x 30&quot;" 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&trade; 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&trade; performs well as a resist ink. VersaMark&trade; - the versatility is in the ink! Refill available. Large Dazzle Frost- Dazzle combines all the great qualities of the original VersaMark&trade; 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&trade; Magnet Tape 1/2&quot;x 30&quot;" 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&trade; Magnet Tape 1/2&quot;x 30&quot;" 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&trade; 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&trade; Magnet Tape 1/2&quot;x 30&quot;" 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&trade; 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&trade; performs well as a resist ink. VersaMark&trade; - the versatility is in the ink! Refill available. Large Dazzle Frost- Dazzle combines all the great qualities of the original VersaMark&trade; 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]);
}

我没有得到图像数组？

Answer 1

使用.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]);
  }
});