1

クラスですべての画像を取得し、frontそれらの src 属性を表示しようとしています。コンソールを見ると動作していますが、img コード全体とともに、クラスが前面にある画像と、クラスが背面にある画像が返されます。src 属性のみが必要です。どうすればこれを行うことができますか?

HTML

<div id="results"></div>

<div id="mm_grid">
   <!-- Grid contents written dynamically -->
   <div class="mm_row">
      <div class="mm_window" id="tile0" onclick="flipImage(this)"><img class="front" src="public/images/mm_image5.jpg" alt="" /><img class="back" src="public/images/mm_back.jpg" alt="" /></div>
      <div class="mm_window" id="tile1" onclick="flipImage(this)"><img class="front" src="public/images/mm_image5.jpg" alt="" /><img class="back" src="public/images/mm_back.jpg" alt="" /></div>
      <div class="mm_clearfix"></div>
   </div>
   <div class="mm_row">
      <div class="mm_window" id="tile2" onclick="flipImage(this)"><img class="front" src="public/images/mm_image8.jpg" alt="" /><img class="back" src="public/images/mm_back.jpg" alt="" /></div>
      <div class="mm_window" id="tile3" onclick="flipImage(this)"><img class="front" src="public/images/mm_image0.jpg" alt="" /><img class="back" src="public/images/mm_back.jpg" alt="" /></div>
      <div class="mm_clearfix"></div>
   </div>
   <div class="mm_row">
      <div class="mm_window" id="tile4" onclick="flipImage(this)"><img class="front" src="public/images/mm_image3.jpg" alt="" /><img class="back" src="public/images/mm_back.jpg" alt="" /></div>
      <div class="mm_window" id="tile5" onclick="flipImage(this)"><img class="front" src="public/images/mm_image2.jpg" alt="" /><img class="back" src="public/images/mm_back.jpg" alt="" /></div>
      <div class="mm_clearfix"></div>
   </div>
</div>​

jQuery

var linkArray = $("img.front").map(function() {
    return $(this).parent().html();
}).get();


console.log(linkArray);

結果 

["<img class="front" src="public/images/mm_image5.jpg" alt=""><img class="back" src="public/images/mm_back.jpg" alt="">", "<img class="front" src="public/images/mm_image5.jpg" alt=""><img class="back" src="public/images/mm_back.jpg" alt="">", "<img class="front" src="public/images/mm_image8.jpg" alt=""><img class="back" src="public/images/mm_back.jpg" alt="">", "<img class="front" src="public/images/mm_image0.jpg" alt=""><img class="back" src="public/images/mm_back.jpg" alt="">", "<img class="front" src="public/images/mm_image3.jpg" alt=""><img class="back" src="public/images/mm_back.jpg" alt="">", "<img class="front" src="public/images/mm_image2.jpg" alt=""><img class="back" src="public/images/mm_back.jpg" alt="">"]
4

4 に答える 4

3

交換

return $(this).parent().html();

と

return $(this).attr('src');

あなたの例では、イメージの親要素 (つまり、div 要素) の HTML コードを取得しています。このようにして、 img 要素のsrc属性のみを取得します。front

于 2012-04-11T08:32:45.160 に答える
2 
var $imgs = $('img.front'),
    arr = [];

$imgs.each(function () {
    arr.push($(this).attr('src'));
});

console.log(arr.join(', '));
于 2012-04-11T08:33:06.720 に答える
0 
var linkArray = $("img.front").map(function() {
    return this.src;
}).get();

map() 内で jQuery 関数を渡す必要はありません

于 2012-04-11T08:34:06.517 に答える
0

SRC 属性のみが必要な場合は、次の手順を実行する必要があります。

$("img.front").each(function (index, element){
   alert($("img.front").eq(index).attr("src"));
});

これにより、各画像の SRC が FRONT クラスで出力されます。

于 2012-04-11T08:35:25.577 に答える