如何使用数组索引序列
How to use an array index sequence
考虑我手动输入的以下代码，因为我不知道更有效(更少行的方法(：
$('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 元素索引，以便自动将数组索引名称添加为 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("https://s.rrimr.com/ui/screwdefaultbuttons/images/radioVerySmall.png"); 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("https://s.rrimr.com/ui/screwdefaultbuttons/images/radioVerySmall.png"); 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("https://s.rrimr.com/ui/screwdefaultbuttons/images/radioVerySmall.png"); 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("https://s.rrimr.com/ui/screwdefaultbuttons/images/radioVerySmall.png"); 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("https://s.rrimr.com/ui/screwdefaultbuttons/images/radioVerySmall.png"); 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 行中应用相应的类，以便将其记录下来以供将来参考和最佳实践指南。
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]);
});
相关文章：
- 是索引数组文字的好做法
- jQuery ajax请求，将索引数组作为关键字字符串
- Javascript中的名称索引-数组/对象
- 如何在对象中按值创建排序索引数组
- 提取索引数组中的整数值
- 来自 jsp 和 javascript 中的请求属性的对象索引数组
- 单击导航索引数组时发出双重警报
- 以编程方式声明基于索引数组的变量(使用谷歌网站列表页面）
- 索引数组 JavaScript 中索引的搜索值
- 根据值从索引数组中删除元素
- 如何检查名称索引数组中有多少个特定结果
- 从 JavaScript 数组中删除索引数组
- 创建一个索引数组，该数组的索引值为 JavaScript 中最常见的数组值
- JavaScript 如何用数组解释索引数组
- 在javascript中向索引数组添加超链接
- 非数字索引数组的长度
- JavaScript-偶数索引数组元素乘以2，奇数索引乘以3
- Javascript-使用索引数组访问数组的元素
- 从数组中删除索引数组
- 在javascript中用索引数组索引一个数组的数组
