Not able to get the end result with for/while LOOP Javascript/Jquery

Question

Im trying to append some html to and element; What i want to do is to count the elements inside a div, then if that number matches certain condition then append some html.

//count how much divs with the class .col-lg are inside #looped
var counting = $("#looped  .col-lg").length;
console.log(counting);

//If statement that works;
if (counting == 12 ) {
  insideLoop.append('<div class="col-12 col-sm-6 col-md-4 col-lg servicios d-flex flex-column mt-sm-3 justify-content-center align-items-center"></div><div class="col-12 col-sm-6 col-md-4 col-lg servicios d-flex flex-column mt-sm-3 justify-content-center align-items-center"></div>');
}

//But i wanted to start from number 3 - 6 - 9 - 12 etc...

I thought maybe with a for loop a would get it , but i always end up on a dead end or an endless loop.

You may want to look here: https://stackoverflow.com/questions/7327056/appending-html-string-to-the-dom/7327125 — Sivcan Singh, Oct 06 '18 at 11:56
are you trying to render this div every 3 iterations? is that the problem? — Roysh, Oct 06 '18 at 12:07
@Mohammad insideLoop is a variable that i forgot to add; var insideLoop = $('#looped'); — Simo, Oct 06 '18 at 12:15
@Roysh Yes!! So at first it looks if there are 3 divs l IF yes then DO; else look for 6 divs , look for 9 divs etc.. — Simo, Oct 06 '18 at 12:17
so why not instead of `(counting == 12 )` use `(counting % 3 === 0 )` ? — Roysh, Oct 06 '18 at 12:26
@Mohammad I took Roysh advice and made it work like this: http://jsfiddle.net/xbo6yu70/4/ — Simo, Oct 06 '18 at 12:39

score 1 · Accepted Answer · answered Oct 06 '18 at 12:51

The answer - You should use the mod operator for every three iterations

var counting = $("#looped  .col-lg").length;



if (counting % 3 === 0) {
  insideLoop.append('<div class="col-12 col-sm-6 col-md-4 col-lg servicios d-flex flex-column mt-sm-3 justify-content-center align-items-center"></div><div class="col-12 col-sm-6 col-md-4 col-lg servicios d-flex flex-column mt-sm-3 justify-content-center align-items-center"></div>');
}

score 0 · Answer 2 · answered Oct 06 '18 at 12:41

0

@Roysh's Comment Did work for me ,

I replaced (counting == 12) with (counting % 3 === 0 ) .

answered Oct 06 '18 at 12:41

Simo

57
8

Not able to get the end result with for/while LOOP Javascript/Jquery

2 Answers2