时间戳

首页 > 解决方案 > jQuery 返回字符串而不是 DOM 对象

javascript - jQuery 返回字符串而不是 DOM 对象

问题描述

如何使用 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>

标签： javascripthtmljquerydom

解决方案

当您console.log()在 DOM 元素上使用时，控制台包含 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>

推荐阅读