It is necessary to get the width of all elements of the list li with the class slide and put them together. List items are added dynamically with AJAX.

Here is a piece of code:

 Slideshow.prototype = { this.slide = this.el.querySelector('.slide'); this.slideWidth(); } slideWidth: function(){ this.slide.offsetWidth; }
  • If that slider is not done that way, as well .width () in a loop by li selector - Serge Esmanovich
  • one
    @SergeEsmanovich, how exactly is the slider done? - Qwertiy ♦
  • What does the given part of the code do, and how does it not suit you? - Grundy
  • @Qwertiy I do not think that the tutorial on creating a slider will fit into the format of the question - Serge Esmanovich
  • @SergeEsmanovich, I do not ask how to make a slider, I ask what you think is wrong in the question code, since you say that you have to do something wrong. I don’t see enough code there to rate the slider. - Qwertiy ♦

3 answers 3

Something like http://codepen.io/korolariya/pen/gPMLRZ

Here on js without jquery http://codepen.io/korolariya/pen/adZBVy

 $(document).ready(function(){ var summ=0; $('li').each(function(){ summ += 1*$(this).width(); }); alert(summ); });
  • forgot to mention that you use jQuery or a similar library, in the question - no libraries are used - Grundy
  • I think it will not be difficult to rewrite the same thing to js - Serge Esmanovich
  • such a solution will not work, the width of a li is always different and not known in advance - Marina Voronova
  • @MarinaVoronova, it’s not clear why it won't work. It seems to be. - Qwertiy ♦
  • one
    @MarinaVoronova I think it is not necessary to explain that it is all the same - Serge Esmanovich

Did so

 Slideshow.prototype = { init: function() { this.slide = this.el.querySelector('.slide'); this.slideWidth();}, slideWidth: function(){ var slide_width = 0; slide_width += $(this.slide).width(); console.log(slide_width); }

I just don’t know how to get the width of dynamically created list items.

    On pure js, this is done using the offsetWidth property:

     Slideshow.prototype = { init: function() { this.slides = this.el.querySelector('.slide'); this.logSlidesWidth(); }, logSlidesWidth: function() { var slides_width = 0; for (var i = 0; i < this.slides.length; i++) { slides_width += this.slides[i].offsetWidth; } console.log(slides_width); } }

    When executing this code, the sum of the widths of all elements with the .slide class that are currently in the DOM e inside the this.el element will be this.el .