Javascript 图像高度仅在一个大的图像数组中检索一次
就像我在标题中写的那样,我有多个元素,它们具有相同的类,我获取该类并尝试检查该图像的子图像的宽度/高度/src 我只获得了第一幅图像的高度//宽度,但得到了所有图像的src 以下是html:Javascript 图像高度仅在一个大的图像数组中检索一次,javascript,jquery,Javascript,Jquery,就像我在标题中写的那样,我有多个元素,它们具有相同的类,我获取该类并尝试检查该图像的子图像的宽度/高度/src 我只获得了第一幅图像的高度//宽度,但得到了所有图像的src 以下是html: <a class="test"> <img src="http://www.kitchenspro.com/files/Testimonials/Large/1502046700250312a71707.jpg"> </a> <a class="test">
<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>");
});
var imagesrc=”“;
var imageheight=“”;
var imagewidth=“”;
var i=0;
$(“.test>img”)。每个(函数(){
i++;
imagesrc=$(this.attr(“src”);
imageheight=$(this).width();
imagewidth=$(this).height();
文档。写入(“
这是图像的src:+imagesrc+”这是img高度:“+imagesheight+”这是宽度:“+imageswidth+”
”;
});
如果我没有以正确的方式呈现代码,我深表歉意
任何帮助都将不胜感激
感谢使用advanced。第一次调用
document.write
会销毁其余元素,因此您只能从其中一个元素获取信息,请使用.append()或者其他东西来显示您的结果。对文档的第一次调用。write
会破坏其余元素,因此您只能从其中一个元素获取信息,请使用.append()或其他东西来显示您的结果。正是@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);
正是@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);
您不应该使用
文档。编写,因为它可能会有意外行为。我刚刚测试了您的代码,但使用的是控制台.log
而不是文档。write
并获得了所有图像的所有正确信息您不应该使用文档。write
,因为它可能会有意外行为。我刚刚测试了您的代码,但使用的是console.log
而不是document.write
并获得了所有图像的所有正确信息,所以您俩都放置了它的文档。write?问题出在哪里?我的意思是我真的不想展示detalis,但我只想把它们放在一个数组中。我会继续测试,会在一秒钟内看到,所以你们都在放置它的文档。写吗?问题出在哪里?我的意思是我真的不想展示detalis,但我只想把它们放在一个数组中。我会继续测试,会看到在一个部门感谢帮助的家伙。我将选择你的答案。你可以很容易地将片段替换为数组。例如变量宽度=[]。然后在循环中,widths.push(宽度);谢谢你们的帮助。我将选择你的答案。你可以很容易地将片段替换为数组。例如变量宽度=[]。然后在循环中,widths.push(宽度);