Question

考虑下面我手动键入的代码，因为我不知道更有效（更少线路方法）：

$('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元素的类？

＆＃13;

$('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", "");

＆＃13;

	  .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;}

＆＃13;

<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>

＆＃13;

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

Answer 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]);
});

如何使用数组索引序列

1 个答案: