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>

Answer 1

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>

Answer 2

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>

Answer 3

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:

1. If you use [index] you get plain DOM elements, for which you can use DOM properties.
2. 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>

Answer 4

Try using:

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

That should work for you: :)

Answer 5

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>