如何使用数组索引序列答案

【问题标题】：How to use an array index sequence如何使用数组索引序列
【发布时间】：2016-02-16 02:35:08
【问题描述】：

考虑以下我手动输入的代码，因为我不知道更有效（更少行的方法）：

$('div.mrSingle:eq(0)').closest('td').addClass("yellow").css("background-color", "");
$('div.mrSingle:eq(1)').closest('td').addClass("lightgreen").css("background-color", "");
$('div.mrSingle:eq(2)').closest('td').addClass("green").css("background-color", "");
$('div.mrSingle:eq(3)').closest('td').addClass("skyblue").css("background-color", "");
$('div.mrSingle:eq(4)').closest('td').addClass("blue").css("background-color", "");

如何在 JavaScript 和 jQuery 中创建一个黄色、浅绿色、绿色、天蓝色和蓝色的数组？那么，如何遍历一组特定的 DOM 元素并将该数组应用于 DOM 元素索引，从而自动将数组索引 name 添加为 DOM 元素的类？

$('div.mrSingle:eq(0)').closest('td').addClass("yellow").css("background-color", "");
$('div.mrSingle:eq(1)').closest('td').addClass("lightgreen").css("background-color", "");
$('div.mrSingle:eq(2)').closest('td').addClass("green").css("background-color", "");
$('div.mrSingle:eq(3)').closest('td').addClass("skyblue").css("background-color", "");
$('div.mrSingle:eq(4)').closest('td').addClass("blue").css("background-color", "");

	  .yellow {background-color: #FFFF00;width: 186px;}
	  .lightgreen {background-color: #CCFF66;width: 186px;}
	  .green {background-color: #00B050;width: 186px;}
	  .skyblue {background-color: #00FFCC;width: 186px;}
	  .blue {background-color: #00B0F0;width: 186px;}
	  .E62 {width: 930px; border-collapse: collapse; border: solid 1px #000; margin: 0 auto;}
	  .E62 td {border: solid 1px #000;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table class="E62">
  <tbody>
    <tr>
      <td class="yellow" colspan="2">Products from a manufacturer using vial caps with distinct colors for each of their vaccines shown on a shelf. The newly launched product with a green cap (in front) is from a different manufacturer from the one in the yellow carton and duplicates
        one of the existing colors.</td>
      <td></td>
      <td class="blue" colspan="2">Products from a manufacturer using consistent vial cap colors for all of their vaccines shown on a shelf. The newly launched vial with a green cap (in front) is from a different manufacturer and does not duplicate the existing colors because the
        existing products all have matching white caps.</td>
    </tr>
    <tr>
      <td id="Cell.1.0" class="mrGridQuestionText yellow" style="text-Align: Center;vertical-align: Bottom;width: 120px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;"><b>Much less likely</b> to create confusion<span id="yellow"></span></span>
      </td>
      <td id="Cell.2.0" class="mrGridQuestionText lightgreen" style="text-Align: Center;vertical-align: Bottom;width: 120px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;"><b>Somewhat less likely</b> to create confusion<span id="lightgreen"></span></span>
      </td>
      <td id="Cell.3.0" class="mrGridQuestionText green" style="text-Align: Center;vertical-align: Bottom;width: 120px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;"><b>Equally likely</b> to create confusion<span id="green"></span></span>
      </td>
      <td id="Cell.4.0" class="mrGridQuestionText skyblue" style="text-Align: Center;vertical-align: Bottom;width: 120px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;"><b>Somewhat less likely</b> to create confusion<span id="skyblue"></span></span>
      </td>
      <td id="Cell.5.0" class="mrGridQuestionText blue" style="text-Align: Center;vertical-align: Bottom;width: 120px;border-color: black;border-style: Solid;border-width: 1px;">
        <span class="mrQuestionText" style="font-size: 9pt;"><b>Much less likely</b> to create confusion<span id="blue"></span></span>
      </td>
    </tr>
    <tr>

      <td id="Cell.1.1" style="text-align: center; vertical-align: middle; width: 120px; border: 1px solid black;" class="yellow">
        <div style="width: 100px;"></div>
        <div class="mrSingle styledRadio" style="width: 100%; height: 27px; cursor: pointer; background-image: url(&quot;https://s.rrimr.com/ui/screwdefaultbuttons/images/radioVerySmall.png&quot;); background-position: 50% -54px;">
          <input type="radio" name="_QGRE62_Q__01_QE62_C" id="_Q0_Q0_Q0_C0" class="mrSingle" disabled="" style="display: none;" value="__01">
        </div>
      </td>
      <td id="Cell.2.1" style="text-align: center; vertical-align: middle; width: 120px; border: 1px solid black;" class="lightgreen">
        <div style="width: 100px;"></div>
        <div class="mrSingle styledRadio" style="width: 100%; height: 27px; cursor: pointer; background-image: url(&quot;https://s.rrimr.com/ui/screwdefaultbuttons/images/radioVerySmall.png&quot;); background-position: 50% -54px;">
          <input type="radio" name="_QGRE62_Q__01_QE62_C" id="_Q0_Q0_Q0_C1" class="mrSingle" disabled="" style="display: none;" value="__02">
        </div>
      </td>
      <td id="Cell.3.1" style="text-align: center; vertical-align: middle; width: 120px; border: 1px solid black;" class="green">
        <div style="width: 100px;"></div>
        <div class="mrSingle styledRadio" style="width: 100%; height: 27px; cursor: pointer; background-image: url(&quot;https://s.rrimr.com/ui/screwdefaultbuttons/images/radioVerySmall.png&quot;); background-position: 50% -54px;">
          <input type="radio" name="_QGRE62_Q__01_QE62_C" id="_Q0_Q0_Q0_C2" class="mrSingle" disabled="" style="display: none;" value="__03">
        </div>
      </td>
      <td id="Cell.4.1" style="text-align: center; vertical-align: middle; width: 120px; border: 1px solid black;" class="skyblue">
        <div style="width: 100px;"></div>
        <div class="mrSingle styledRadio" style="width: 100%; height: 27px; cursor: pointer; background-image: url(&quot;https://s.rrimr.com/ui/screwdefaultbuttons/images/radioVerySmall.png&quot;); background-position: 50% -54px;">
          <input type="radio" name="_QGRE62_Q__01_QE62_C" id="_Q0_Q0_Q0_C3" class="mrSingle" disabled="" style="display: none;" value="__04">
        </div>
      </td>
      <td id="Cell.5.1" style="text-align: center; vertical-align: middle; width: 120px; border: 1px solid black;" class="blue">
        <div style="width: 100px;"></div>
        <div class="mrSingle styledRadio" style="width: 100%; height: 27px; cursor: pointer; background-image: url(&quot;https://s.rrimr.com/ui/screwdefaultbuttons/images/radioVerySmall.png&quot;); background-position: 50% -54px;">
          <input type="radio" name="_QGRE62_Q__01_QE62_C" id="_Q0_Q0_Q0_C4" class="mrSingle" disabled="" style="display: none;" value="__05">
        </div>
      </td>
    </tr>
  </tbody>
</table>

我的目标/希望是能够在1行声明数组，然后使用.each()方法在1行应用对应的类，所以以便将其记录下来以供将来参考和最佳实践指南。

【问题讨论】：

标签： javascript jquery arrays for-loop

【解决方案1】：

colors = ['yellow','lightgreen','green','skyblue','blue'];
colors.forEach(function(color, index){
    $('div.mrSingle:eq('+index+')').closest('td').addClass(color).css("background-color", "");
});

或者，使用 jQuery 更简洁：

colors = ['yellow','lightgreen','green','skyblue','blue'];
$('.mrSingle').each(function(index, element){
     element.closest('td').addClass(colors[index]);
});

【讨论】：

在 JavaScript 和 jQuery 中我该怎么做......对于它的价值，似乎 OP 想要两者
@DelightedD0D jQuery 是 JavaScript。我现在不打算给这个人上 JS 速成课程，我的回答是弄清楚其余部分的一个很好的起点。注意他的问题的措辞......“我如何在 JavaScript 和 jQuery 中创建一个黄色、浅绿色、绿色、天蓝色和蓝色的数组”......答案是一样的......colors = [...]
您是如何在没有声明的情况下凭空提取 color 变量的？ JS知道你的意思吗？
@AlexanderDixon in JS array.forEach 总是返回一个回调，其中包含数组的当前元素和当前索引作为变量，我只是给它命名为 color... 所以一般来说， array.forEach(function(item_in_array, index_in_array){ }) 函数在其中调用 为数组的每个 元素。如果您想要更深入的解释，请告诉我！
jQuery element.closest 抛出控制台日志错误。我知道我可以简单地使用$(this)，只是想知道，由于当前语法不起作用，我们如何正确传递函数的参数。