0

タイトルに書いたように、同じクラスの要素が複数あり、そのクラスをフェッチして、その画像の子画像の幅/高さ/ソースを確認しようとします。

//最初の画像の高さ//幅しか取得できませんが、すべての画像のsrcを取得します。

ここにhtmlがあります：

<a class="test">
<img src="http://www.kitchenspro.com/files/Testimonials/Large/1502046700250312a71707.jpg">
</a>
<a class="test">
<img src="http://www.kitchenspro.com/files/Testimonials/Large/40183.9461166782.jpg">
</a>
<a class="test">
<img src="http://sphotos-a.xx.fbcdn.net/hphotos-ash4/s480x480/391362_365319466870994_1543740404_n.jpg">
</a>

これがjqueryです

var imagesrc= "";
var imageheight = "";
var imagewidth = "";
var i=0;
$(".test > img").each(function() {
i++;
imagesrc = $(this).attr("src");
imageheight = $(this).width();
imagewidth = $(this).height();
document.write("<br>This is image's src: " + imagesrc + " This is img height: " + imageheight + " this is width: " + imagewidth + "<br>");            
});

コードを正しい方法で提示しなかった場合は、お詫び申し上げます。

どんな助けでも大歓迎です。

よろしくお願いします。

4

2 に答える 2

2

残りの要素を破棄する最初の呼び出しdocument.writeは、要素の1つからのみ情報を取得する理由です。そのため、.append（）などを使用して結果を表示します。

于 2012-07-17T00:13:48.393 に答える
1

まさに@Musaが言ったこと。

コードをクリーンアップし、効率とネイティブJavaScriptに関するレッスンを提供するために、スニペットを提供しました。

// Document Fragments are lightweight DOM containers. Append elements to this in loops and then attach the fragment to the actual DOM afterwards to increase efficiency. 
var frag = document.createDocumentFragment();

// i, or index, comes out of box in most loops.
$(".test img").each(function(i, el) {
 // Local variables specific to each image
 var imagesrc = $(this).attr("src");
 var imageheight = $(this).width();
 var imagewidth = $(this).height();
 var message = "This is image's src: " + imagesrc + " This is img height: " + imageheight + " this is width: " + imagewidth;

 // Appending the node to the frag with native js
 var p = document.createElement("p");
 p.innerText = message;
 frag.appendChild(p);

 // Viewing the console message for fun
 console.log(message);     
});

document.body.appendChild(frag);
于 2012-07-17T00:26:44.463 に答える