Increase Element Width Using JQuery Or JS

So I have multiple elements with class name ml, all different widths because of different text contents (not set in CSS). for example:

Solution 1:

Just to point out, you're using pure JS -which is very brave of you ;) anyway, with jQuery, you could try something like below:

$(window).load(function() {
    $(".ml").each(function() { // this is kindof sugary way of doing for loop over array of elements - which is $(".ml")
         var $this = $(this); // the current jQueried .ml element
         var currentWidth = $this.width(); // get width of current element, width is a jQuery method: https://api.jquery.com/width/
         var newWidth = currentWidth + 5; // increment the width
         $this.width(newWidth); // pass in the new width as the parameter.
    });
});

Solution 2:

In your code:

var curr_width = elems[i].width();

resolve to an undefined value, because DOM object doesn't have width property (only jQuery object have this one).

So the next statement (curr_width+num) is incorrect because you want to add an undefined value with a number.