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

我没有得到图像数组？

score 3 · Accepted Answer

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

score 2 · Accepted Answer

你需要使用 .get()，因为 >map() 返回一个 jQuery 对象而不是一个数组

var tn_array = $("#slider ul li img").map(function() {
    return $(this).attr("src");
}).get();

score 1 · Accepted Answer

尝试

var tn_array = [];
$( "#slider ul li img" ).each(function() {
  tn_array.push($(this).attr("src"));
});

jquery - 使用jquery进入数组中的所有图像？

3 回答 3

Related

Reference