jQuery returns string instead of DOM object

Question

how can I get DOM object to get some properties of HTML elements with jQuery? For example I want to get dimensions of image after document loaded.

Here is my code:

$(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>

First console.log()gives me DOM object, but the second one only string representation of one of children...but I need real object to iterate throught it (to get dimensions of every image). How can I do it?

There is my result of second console.log():

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

divs will be a jQuery collection, not a DOM object. divs[1] will be an HTMLDivElement, not a string, which should be perfectly interactable with — CertainPerformance
– CertainPerformance, Commented Aug 31, 2020 at 20:10
Tell us what you want to get at and we can tell you what you need to do. For now it is an X/Y problem — mplungjan
– mplungjan, Commented Aug 31, 2020 at 20:13
how can I get width of image from my example? divs.eq(1).children().eq(0).width doesn't work... — Petr Marek
– Petr Marek, Commented Aug 31, 2020 at 20:27

Barmar · Accepted Answer · 2020-08-31 20:12:22Z

2

When you use console.log() on a DOM element, the console contains the HTML representation, similar to what's shown in the Elements tab. It's not a string -- you can expand it to see nested elements, you can access attributes, find it in the Elements tab, etc.

If you want something that you can view like a JavaScript object, use console.dir() instead of 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>

answered Aug 31, 2020 at 20:12

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Petr Marek Over a year ago

But how can I access children of divs[1]?

Barmar Over a year ago

divs.eq(1).children()

Barmar Over a year ago

divs[1] is a DOM element, divs.eq(1) is a jQuery object.

Petr Marek Over a year ago

Ok and how can I get width of image from my example? divs.eq(1).children().eq(0).width doesn't work...

Barmar Over a year ago

It should be .width(). Almost everything in jQuery is functions, not properties.

gaetanoM · Accepted Answer · 2020-08-31 20:40:31Z

For example I want to get dimensions of image after document loaded.

In order to achive your result you can search for all img elements under the div thumbnails_div. For each img you can print the image size using .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>

Alfonso Piedrasanta · Accepted Answer · 2020-08-31 20:30:34Z

0

Try using:

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

That should work for you! :)

answered Aug 31, 2020 at 20:30

Alfonso Piedrasanta

131 silver badge5 bronze badges

Comments

Peter B · Accepted Answer · 2020-08-31 20:41:20Z

To get to the images inside the main div, you can use a multi-part or cascading jQuery selector.

After that you can use the elements inside the resulting collection in 2 ways:

If you use [index] you get plain DOM elements, for which you can use DOM properties.
If you use .eq(index) you get a jQuery wrapper for each DOM element, which then supports further jQuery functions such as .width() and .height().

Demo:

$(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>

Janardhan Burle · Accepted Answer · 2020-08-31 20:48:12Z

We can access the DOM object using JQuery as below.

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

Ex: Get width of the loaded 2nd image as below

$(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>

Collectives™ on Stack Overflow

jQuery returns string instead of DOM object

5 Answers 5

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related