jQuery返回字符串而不是DOM对象
jQuery返回字符串而不是DOM对象
提问于 2020-08-31 20:03:10
如何使用jQuery获取DOM对象以获得HTML元素的一些属性？例如，我希望在加载文档后获得图像的维数。
这是我的代码：
$(function() {
var divs = $("#thumbnails_div").children();
console.log(divs);
console.log(divs[1]);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="thumbnails_div" class="article_content row">
<div class="col-2">
<img src="img/1.jpg" alt="Kubota" class="img_thumbnail">
</div>
<div class="col-2">
<img src="img/2.jpg" alt="Kubota" class="img_thumbnail">
</div>
第一个console.log()给我DOM对象，但第二个只给出一个children...but的字符串表示，我需要真正的对象来迭代它(以获得每个图像的维数)。我该怎么做呢？
这是第二个console.log()的结果：
<div class="col-2">
<img src="img/2.jpg" alt="Kubota" class="img_thumbnail">
</div>回答 5
Stack Overflow用户
回答已采纳
发布于 2020-08-31 20:19:15
例如，我希望在加载文档后获得图像的维数。
为了获得您的结果，可以搜索div thumbnails_div.下的所有img元素。对于每个img，可以使用.each()打印图像大小。
$(function() {
var divs = $("#thumbnails_div img").each(function (idx, ele) {
console.log("element index: " + idx, " width:" + ele.width + " height: " + ele.height);
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="thumbnails_div" class="article_content row">
<div class="col-2">
<img src="https://dummyimage.com/200x150/000/fff&text=200+x+150" alt="Kubota" class="img_thumbnail">
</div>
<div class="col-2">
<img src="https://dummyimage.com/300x200/000/fff&text=300+x+200" alt="Kubota" class="img_thumbnail">
</div>
</div>
Stack Overflow用户
发布于 2020-08-31 20:12:22
当您在DOM元素上使用console.log()时，控制台包含HTML表示形式，类似于元素选项卡中显示的内容。它不是字符串--您可以展开它以查看嵌套的元素，您可以访问属性，在元素选项卡中找到它，等等。
如果您想要像JavaScript对象那样可以查看的东西，请使用console.dir()而不是console.log()。
$(function() {
var divs = $("#thumbnails_div").children();
console.log(divs);
console.dir(divs[1]);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="thumbnails_div" class="article_content row">
<div class="col-2">
<img src="img/1.jpg" alt="Kubota" class="img_thumbnail">
</div>
<div class="col-2">
<img src="img/2.jpg" alt="Kubota" class="img_thumbnail">
</div>
Stack Overflow用户
发布于 2020-08-31 20:22:57
要获取主div中的图像，可以使用多部件或级联jQuery选择器。
之后，您可以通过以下两种方式使用结果集合中的元素：
- 如果使用
[index]，就会得到普通的DOM元素，对于这些元素，您可以使用DOM属性。 - 如果使用
.eq(index)，将为每个DOM元素提供一个jQuery包装器，然后支持进一步的jQuery函数，如.width()和.height()。
演示：
$(document).ready(function() {
var images = $("#thumbnails_div .img_thumbnail");
for (var i = 0; i < images.length; i++) {
console.log("images[" + i + "]:", images[i]);
console.log("dimensions:", images.eq(i).width() + ' x ' + images.eq(i).height());
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="thumbnails_div" class="article_content row">
<div class="col-2">
<img src="https://via.placeholder.com/150x100" alt="Kubota" class="img_thumbnail">
</div>
<div class="col-2">
<img src="https://via.placeholder.com/140x110" alt="Kubota" class="img_thumbnail">
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63677466
复制相关文章
相似问题
腾讯云开发者
