jQuery 返回字符串而不是 DOM 对象答案

【问题标题】：jQuery returns string instead of DOM objectjQuery 返回字符串而不是 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 对象，但第二个只是一个孩子的字符串表示......但我需要真实的对象来遍历它（以获取每个图像的尺寸）。我该怎么做？

这是我第二个 console.log() 的结果：

<div class="col-2">
    <img src="img/2.jpg" alt="Kubota" class="img_thumbnail">
</div>

【问题讨论】：

divs 将是一个 jQuery 集合，而不是一个 DOM 对象。 divs[1] 将是一个 HTMLDivElement，而不是一个字符串，它应该可以完美地交互
告诉我们您想要做什么，我们可以告诉您您需要做什么。现在是 X/Y 问题
但是你知道如何访问 div[1] 的子元素吗？
如何从我的示例中获取图像宽度？ divs.eq(1).children().eq(0).width 不起作用...

标签： javascript html jquery dom

【解决方案1】：

当您在 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>

【讨论】：

但是如何访问 div[1] 的子项？
divs.eq(1).children()
divs[1] 是一个 DOM 元素，divs.eq(1) 是一个 jQuery 对象。
好的，如何从我的示例中获取图像宽度？ divs.eq(1).children().eq(0).width 不起作用...
应该是.width()。 jQuery 中几乎所有东西都是函数，而不是属性。

【解决方案2】：

例如，我想在文档加载后获取图像的尺寸。

为了获得您的结果，您可以搜索 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>

【讨论】：

【解决方案3】：

尝试使用：

$(function() {
  var divs = $("#thumbnails_div").children();
  console.log(divs.eq(1));
});

这应该对你有用！ :)

【讨论】：

【解决方案4】：

要获取主 div 内部的图像，您可以使用多部分或级联 jQuery 选择器。

之后，您可以通过 2 种方式使用结果集合中的元素：

如果您使用[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>

【讨论】：

【解决方案5】：

我们可以使用 JQuery 访问 DOM 对象，如下所示。

$(element)  // in your case it is $(divs[1])

例如：获取加载的第二张图片的宽度，如下所示

$(divs[1]).children()[0].clientHeight

$(function() {
  var divs = $("#thumbnails_div").children();
console.log('Image Source-->','\n',$(divs[1]).children().attr('src'));
  console.log('Height of rendered Image-->','\n',$(divs[1]).children()[0].clientHeight);
});

<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="https://blog.matcharesident.com/wp-content/uploads/2019/07/iStock-944453634.jpg" alt="Kubota"
            class="img_thumbnail">
    </div>
</div>

【讨论】：