Javascript循环逻辑

我会通过文字+截图来解释

我有三个容器，其中包含以下内容

它们每个都有不同的id和相同的类

<div id="container" class='list-cont'>
    <h2> One Two Three Four</h2>
</div>

<div id="container-1" class='list-cont'>
    <h2> Four Five Six </h2>
</div>

<div id="container-2" class='list-cont'>
    <h2> Seven Eight Nine Ten Eleven</h2>
</div>

一二三四
四五六
7891011

我这样做的目的是，使每个容器的前半部分的单词变成不同的颜色，其余的也都是不同的颜色，就像这个一样。但是主要问题是，代码不断循环，我不知道为什么会发生这种情况，页面会不停地重新加载

代码：

//Count total number of div's which has a class of list-cont
var div_items = $(".list-cont").length;

for (var q = 1; q <= div_items; q++) {
  //If 1 the container who doesn't have "-" will get an update
  if (q = 1) {

    //Get value of h2 of the container who doesn't have "-"
    var s = $('div#container h2').html();

    s = s.replace(/(^\s*)|(\s*$)/gi,"");
    s = s.replace(/[ ]{2,}/gi," ");
    s = s.replace(/\n /,"\n");

    //Number of words
    var str_length = s.split(' ').length;

    //Words in an array
    var str_array = s.split(' ');

    //Get total of first half of words
    var len_first = Math.round(str_length / 2);

    //Delete Value of h2
    $("div#container h2").html('');

    for (var ctr = 0; ctr < str_length; ctr++) {
      if (ctr >= len_first) {
        $("div#container h2").append(" <font color='#fdbd16'>"+ str_array[ctr] +"</font> ");
      } else {
        $("div#container h2").append(" " + str_array[ctr] + " ");
      }
    }
  } else {
    //Container has "-" like container-1 or container-2

    //Get value of h2 of the container who doesn't have "-"
    var s = $('div#container-'+ q +' h2').html();

    s = s.replace(/(^\s*)|(\s*$)/gi,"");
    s = s.replace(/[ ]{2,}/gi," ");
    s = s.replace(/\n /,"\n");

    //Number of words
    var str_length = s.split(' ').length;

    //Words in an array
    var str_array = s.split(' ');

    //Get total of first half of words
    var len_first = Math.round(str_length / 2);

    //Delete Value of h2
    $("div#container-"+ q +" h2").html('');

    for (var ctr = 0; ctr < str_length; ctr++) {
      if (ctr >= len_first) {
        $("div#container-"+ q +" h2").append(" <font color='#fdbd16'>"+ str_array[ctr] +"</font> ");
      } else {
        $("div#container-"+ q +" h2").append(" " + str_array[ctr] + " ");
      }
    }
  }
}

//计算具有list cont类的div的总数
var div_items=$（“.list cont”）.长度；
对于（变量q=1；q=len_优先）{
$（“div#container h2”）.append（“+str#u数组[ctr]+”）；
}否则{
$（“div#container h2”）.append（“+str#u数组[ctr]+”）；
}
}
}否则{
//容器具有与容器-1或容器-2类似的“-”
//获取没有“-”的容器的h2值
var s=$（'div#container-'+q+'h2'）.html（）；
s=s.replace（/（^\s*）|（\s*$）/gi，“”；
s=s.replace（/[]{2，}/gi，“”）；
s=s.replace（/\n/，“\n”）；
//字数
var str_length=s.split（“”）.length；
//数组中的字
var str_数组=s.split（“”）；
//获取前半部分单词的总数
变量len_first=数学圆（str_长度/2）；
//删除h2的值
$（“div#container-”+q+“h2”）.html（“”）；
对于（变量ctr=0；ctr=len_first）{
$（“div#container-”+q+“h2”）。追加（“+str#u数组[ctr]+”）；
}否则{
$（“div#container-”+q+“h2”）。追加（“+str#u数组[ctr]+”）；
}
}
}
}

您的代码有很多错误，但使其无限循环的原因是

for (var q = 1; q <= div_items; q++) {
    if (q = 1) {
        // q is now 1
        // so it stays lower than div_items (3) forever, the loop continues
    }
}

if (q == 1) {