How to get width of each dom element in array?

Question

footLinks is an array of selected DOM elements via jquery. Here's the code im working on:

var footLinks = $('.links li');

for (var i = 0; i < footLinks.length; i++) {
    var footLink = footLinks[i];
    var footLinkWidth = footLink.width();
    console.log('Width: ' + footLinkWidth);
}

How do I get each element's width?

Answer 1

I think it would be better if you wrote it like this:

$('.links li').each(function(d) {
    console.log("Width: "+$(this).width())
});

Answer 2

jQuery returns object in array, and when you want to use each DOM element in loop that is work with JavaScript function, but width() is not native function, if you want to get width using jQuery width() method then create jquery object like $(footLink) so you can also use offsetWidth native method

$(footLink).width();

OR

footLink.offsetWidth;

Answer 3

Use jQuery wrapper for the footLink :

var footLinks = $('.links li');

for (var i = 0; i < footLinks.length; i++) {
    var footLink = footLinks[i];
    var footLinkWidth = $(footLink).width();
    console.log('Width: ' + footLinkWidth);
}