Javascript loop stop using if condition

Question

$("div").each(function(i, obj) {
  i++;
  var stopLoop = false; 
  if (!$(obj).attr('style') && stopLoop !== true) {
    $(obj).attr('style', 'background:'+getRandomColor()+';');
    return false;
  }
});

Above method work, it will add one new color to my div whenever the function got fired. But because of the return false is used, my code after it will not run. So I try to use if condition instead of return false, it doesn't work the same.

// doesn't work

    $("div").each(function(i, obj) {
      i++;
      var stopLoop = false; 
      if (!$(obj).attr('style') && stopLoop !== true) {
        $(obj).attr('style', 'background:'+getRandomColor()+';');
        stopLoop = true;
      }
    });

Answer 1

Try with break :

$("div").each(function(i, obj) {
    i++;
    if (!$(obj).attr('style')) {
        $(obj).attr('style', 'background:'+getRandomColor()+';');
        break;
    }
});

Answer 2

Use the solution below

var stopLoop = false;

$("div").each(function(i, obj) {
  if(i === 0) {
    stopLoop = false;
  }

  i++;

  if (!$(obj).attr('style') && !stopLoop) {
    $(obj).attr('style', 'background:'+getRandomColor()+';');
    stopLoop = true;
  }
});

Answer 3

declare stopLoop variable in global scope. in you case stopLoop is deaclared inside function and after function ends it's work variable will be deleted. and on the other iteration it will be declared again with value false