javascript - For 循环变量索引

标签 javascript jquery for-loop console

我正在尝试调用一个已经声明的变量。我在 for 循环 中调用它来执行一些基本的 console.log() 迭代测试，以便我知道我的目标是什么以及正在渲染什么。我不想在 for 循环中再次写出选择器的语法(这是这个问题的起源)。

有没有办法在for循环中调用变量并将迭代编号附加到它。

请考虑以下代码:

var $inputBoxes =  $('.rrSumColTotal').closest('table').find('tr td input[type=text]').not(':first');

        for (i = 0, z = $inputBoxes.length; i < z; i++){
            console.log($inputBoxes.attr("class").toString());
        }

我希望迭代的每个项目都显示在控制台中的新行上，而不是像当前那样全部显示在一行中。有关其他上下文，请考虑此代码，它会自动将迭代项放在新行上。

for (i = 0, z = $("area[data-mkey]").length; i < z; i++) {
  var logThis = $("area[data-mkey]:eq('" + i + "')").attr("coords").split(",").splice(0, 4).toString();
  //console.log(logThis);
}

所以，理想情况下我正在寻找类似 $inputBoxes[i] 或 $inputBoxes.index(i) 但这些不起作用。

var $inputBoxes = $('.rrSumColTotal').closest('table').find('tr td input[type=text]').not(':first');
var $gridRows = $('.rrSumColTotal').closest('table').find('tr');

//Create an array of TD amount per row

$.each($inputBoxes, function(i) {
  $inputBoxes.addClass("targetInput_" + i);
});

//console.log($inputBoxes.length);
for (i = 0, z = $inputBoxes.length; i < z; i++) {
  console.log($inputBoxes.attr("class").toString());
}
<div class="rrQuestionContainer">
  <div></div>
  <span class="mrQuestionText" style=""><span class="sumcol"></span>Think about your LAST 10 CLL patients who were prescribed a 2nd line CLL treatment, are patients with 17p Deletion, and fit each bucket below. How many were treated with the following
  in the 2nd line? Responses must add up to at least 10 across all columns, but may add to more if combination therapy was used.</span>
  <div></div>
  <span style="">
								<table summary="<span class='sumcol'></span>Think about your LAST 10 CLL patients who were prescribed a 2nd line CLL treatment, are patients with 17p Deletion, and fit each bucket below. How many were treated with the following in the 2nd line?
  Responses must add up to at least 10 across all columns, but may add to more if combination therapy was used." class="mrQuestionTable" style="width: 925px;">
  <tbody>
    <tr>
      <td id="Cell.0.0">
      </td>
      <td id="Cell.1.0" class="mrGridQuestionText" style="width: 150px;">
        <div></div>
        <span class="mrQuestionText" style=""><center><b>2<sup>nd</sup> Line CLL Patients Who:</b> Has 17p Deletion, has NOT received Imbruvica (ibrutinib) or Zydelig (idelalisib) in the 1st line</center></span>
      </td>
      <td id="Cell.2.0" class="mrGridQuestionText" style="width: 150px;">
        <div></div>
        <span class="mrQuestionText" style=""><center><b>2<sup>nd</sup> Line CLL Patients Who:</b> Has 17p Deletion, has received Imbruvica (ibrutinib) in the 1st line, but NOT Zydelig (idelalisib) in the 1<sup>st</sup> line</center></span>
      </td>
      <td id="Cell.3.0" class="mrGridQuestionText" style="width: 150px;">
        <div></div>
        <span class="mrQuestionText" style=""><center><b>2<sup>nd</sup> Line CLL Patients Who:</b> Has 17p Deletion, has received Zydelig (idelalisib) in the 1st line, but NOT Imbruvica (ibrutinib) in the 1<sup>st</sup> line</center></span>
      </td>
      <td id="Cell.4.0" class="mrGridQuestionText" style="width: 150px;">
        <div></div>
        <span class="mrQuestionText" style=""><center><b>2<sup>nd</sup> Line CLL Patients Who:</b> Has 17p Deletion, has received Imbruvica (ibrutinib) AND Zydelig (idelalisib) in the 1<sup>st</sup> line</center></span>
      </td>

    </tr>
    <tr>
      <td id="Cell.0.1" class="mrGridCategoryText" style="text-Align: Left;vertical-align: Middle;background-color: #D8D8D8;width: 300px;border-color: black;border-width: 1px;border-left-style: Solid;border-right-style: Solid;border-top-style: Solid;border-bottom-style: Solid;">
        <span class="mrQuestionText" style="font-size: 9pt;"><b>Antibody infusions</b>:<br> Rituxan (rituximab),<br>Gazyva (obinutuzumab), etc.</span>
      </td>
      <td id="Cell.1.1" style="text-Align: Center;vertical-align: Middle;background-color: #D8D8D8;width: 120px;border-color: black;border-width: 1px;border-left-style: Solid;border-right-style: Solid;border-top-style: Solid;border-bottom-style: Solid;">
        <div></div>
        <span style="">
												<div></div>
												<input type="text" name="_QPageB1_QGRB1_Q__01_QB1A" id="_Q0_Q0_Q0" class="mrEdit" autocomplete="on" style="width: 3em;" maxlength="2" value="">
											</span>
      </td>
      <td id="Cell.2.1" style="text-Align: Center;vertical-align: Middle;background-color: #D8D8D8;width: 120px;border-color: black;border-width: 1px;border-left-style: Solid;border-right-style: Solid;border-top-style: Solid;border-bottom-style: Solid;">
        <div></div>
        <span style="">
												<div></div>
												<input type="text" name="_QPageB1_QGRB1_Q__01_QB1B" id="_Q0_Q0_Q1" class="mrEdit targetInput_0 rowA" autocomplete="on" style="width: 3em;" maxlength="2" value="">
											</span>
      </td>
      <td id="Cell.3.1" style="text-Align: Center;vertical-align: Middle;background-color: #D8D8D8;width: 120px;border-color: black;border-width: 1px;border-left-style: Solid;border-right-style: Solid;border-top-style: Solid;border-bottom-style: Solid;">
        <div></div>
        <span style="">
												<div></div>
												<input type="text" name="_QPageB1_QGRB1_Q__01_QB1C" id="_Q0_Q0_Q2" class="mrEdit targetInput_1 rowA" autocomplete="on" style="width: 3em;" maxlength="2" value="">
											</span>
      </td>
      <td id="Cell.4.1" style="text-Align: Center;vertical-align: Middle;background-color: #D8D8D8;width: 120px;border-color: black;border-width: 1px;border-left-style: Solid;border-right-style: Solid;border-top-style: Solid;border-bottom-style: Solid;">
        <div></div>
        <span style="">
												<div></div>
												<input type="text" name="_QPageB1_QGRB1_Q__01_QB1D" id="_Q0_Q0_Q3" class="mrEdit targetInput_2 rowA" autocomplete="on" style="width: 3em;" maxlength="2" value="">
											</span>
      </td>

    </tr>
    <tr>
      <td id="Cell.0.2" class="mrGridCategoryText" style="text-Align: Left;vertical-align: Middle;background-color: #F8F8F8;width: 300px;border-color: black;border-width: 1px;border-left-style: Solid;border-right-style: Solid;border-top-style: Solid;border-bottom-style: Solid;">
        <span class="mrQuestionText" style="font-size: 9pt;"><b>Chemo:</b> Fludara (fludarabine), Treanda (bendamustine), etc.</span>
      </td>
      <td id="Cell.1.2" style="text-Align: Center;vertical-align: Middle;background-color: #F8F8F8;width: 120px;border-color: black;border-width: 1px;border-left-style: Solid;border-right-style: Solid;border-top-style: Solid;border-bottom-style: Solid;">
        <div></div>
        <span style="">
												<div></div>
												<input type="text" name="_QPageB1_QGRB1_Q__02_QB1A" id="_Q0_Q1_Q0" class="mrEdit targetInput_3 rowA" autocomplete="on" style="width: 3em;" maxlength="2" value="">
											</span>
      </td>
      <td id="Cell.2.2" style="text-Align: Center;vertical-align: Middle;background-color: #F8F8F8;width: 120px;border-color: black;border-width: 1px;border-left-style: Solid;border-right-style: Solid;border-top-style: Solid;border-bottom-style: Solid;">
        <div></div>
        <span style="">
												<div></div>
												<input type="text" name="_QPageB1_QGRB1_Q__02_QB1B" id="_Q0_Q1_Q1" class="mrEdit targetInput_4 rowA" autocomplete="on" style="width: 3em;" maxlength="2" value="">
											</span>
      </td>
      <td id="Cell.3.2" style="text-Align: Center;vertical-align: Middle;background-color: #F8F8F8;width: 120px;border-color: black;border-width: 1px;border-left-style: Solid;border-right-style: Solid;border-top-style: Solid;border-bottom-style: Solid;">
        <div></div>
        <span style="">
												<div></div>
												<input type="text" name="_QPageB1_QGRB1_Q__02_QB1C" id="_Q0_Q1_Q2" class="mrEdit targetInput_5 rowA" autocomplete="on" style="width: 3em;" maxlength="2" value="">
											</span>
      </td>
      <td id="Cell.4.2" style="text-Align: Center;vertical-align: Middle;background-color: #F8F8F8;width: 120px;border-color: black;border-width: 1px;border-left-style: Solid;border-right-style: Solid;border-top-style: Solid;border-bottom-style: Solid;">
        <div></div>
        <span style="">
												<div></div>
												<input type="text" name="_QPageB1_QGRB1_Q__02_QB1D" id="_Q0_Q1_Q3" class="mrEdit targetInput_6 rowA" autocomplete="on" style="width: 3em;" maxlength="2" value="">
											</span>
      </td>

    </tr>
    <tr>
      <td id="Cell.0.3" class="mrGridCategoryText" style="text-Align: Left;vertical-align: Middle;background-color: #D8D8D8;width: 300px;border-color: black;border-width: 1px;border-left-style: Solid;border-right-style: Solid;border-top-style: Solid;border-bottom-style: Solid;">
        <span class="mrQuestionText" style="font-size: 9pt;"><b>Antibody and Chemo</b> : "FCR" (fludarabine/ cyclophosphamide/ rituximab) or BR ((bendamustine and rituximab)</span>
      </td>
      <td id="Cell.1.3" style="text-Align: Center;vertical-align: Middle;background-color: #D8D8D8;width: 120px;border-color: black;border-width: 1px;border-left-style: Solid;border-right-style: Solid;border-top-style: Solid;border-bottom-style: Solid;">
        <div></div>
        <span style="">
												<div></div>
												<input type="text" name="_QPageB1_QGRB1_Q__03_QB1A" id="_Q0_Q2_Q0" class="mrEdit targetInput_7 rowA" autocomplete="on" style="width: 3em;" maxlength="2" value="">
											</span>
      </td>
      <td id="Cell.2.3" style="text-Align: Center;vertical-align: Middle;background-color: #D8D8D8;width: 120px;border-color: black;border-width: 1px;border-left-style: Solid;border-right-style: Solid;border-top-style: Solid;border-bottom-style: Solid;">
        <div></div>
        <span style="">
												<div></div>
												<input type="text" name="_QPageB1_QGRB1_Q__03_QB1B" id="_Q0_Q2_Q1" class="mrEdit targetInput_8 rowA" autocomplete="on" style="width: 3em;" maxlength="2" value="">
											</span>
      </td>
      <td id="Cell.3.3" style="text-Align: Center;vertical-align: Middle;background-color: #D8D8D8;width: 120px;border-color: black;border-width: 1px;border-left-style: Solid;border-right-style: Solid;border-top-style: Solid;border-bottom-style: Solid;">
        <div></div>
        <span style="">
												<div></div>
												<input type="text" name="_QPageB1_QGRB1_Q__03_QB1C" id="_Q0_Q2_Q2" class="mrEdit targetInput_9 rowA" autocomplete="on" style="width: 3em;" maxlength="2" value="">
											</span>
      </td>
      <td id="Cell.4.3" style="text-Align: Center;vertical-align: Middle;background-color: #D8D8D8;width: 120px;border-color: black;border-width: 1px;border-left-style: Solid;border-right-style: Solid;border-top-style: Solid;border-bottom-style: Solid;">
        <div></div>
        <span style="">
												<div></div>
												<input type="text" name="_QPageB1_QGRB1_Q__03_QB1D" id="_Q0_Q2_Q3" class="mrEdit targetInput_10 rowA" autocomplete="on" style="width: 3em;" maxlength="2" value="">
											</span>
      </td>

    </tr>
    <tr>
      <td id="Cell.0.4" class="mrGridCategoryText" style="text-Align: Left;vertical-align: Middle;background-color: #F8F8F8;width: 300px;border-color: black;border-width: 1px;border-left-style: Solid;border-right-style: Solid;border-top-style: Solid;border-bottom-style: Solid;">
        <span class="mrQuestionText" style="font-size: 9pt;"><b>Oral Oncolytic</b>: Imbruvica</span>
      </td>
      <td id="Cell.1.4" style="text-Align: Center;vertical-align: Middle;background-color: #F8F8F8;width: 120px;border-color: black;border-width: 1px;border-left-style: Solid;border-right-style: Solid;border-top-style: Solid;border-bottom-style: Solid;">
        <div></div>
        <span style="">
												<div></div>
												<input type="text" name="_QPageB1_QGRB1_Q__04_QB1A" id="_Q0_Q3_Q0" class="mrEdit targetInput_11 rowA" autocomplete="on" style="width: 3em;" maxlength="2" value="">
											</span>
      </td>
      <td id="Cell.2.4" style="text-Align: Center;vertical-align: Middle;background-color: #F8F8F8;width: 120px;border-color: black;border-width: 1px;border-left-style: Solid;border-right-style: Solid;border-top-style: Solid;border-bottom-style: Solid;">
        <div></div>
        <span style="">
												<div></div>
												<input type="text" name="_QPageB1_QGRB1_Q__04_QB1B" id="_Q0_Q3_Q1" class="mrEdit targetInput_12 rowA" autocomplete="on" style="width: 3em;" maxlength="2" value="">
											</span>
      </td>
      <td id="Cell.3.4" style="text-Align: Center;vertical-align: Middle;background-color: #F8F8F8;width: 120px;border-color: black;border-width: 1px;border-left-style: Solid;border-right-style: Solid;border-top-style: Solid;border-bottom-style: Solid;">
        <div></div>
        <span style="">
												<div></div>
												<input type="text" name="_QPageB1_QGRB1_Q__04_QB1C" id="_Q0_Q3_Q2" class="mrEdit targetInput_13 rowA" autocomplete="on" style="width: 3em;" maxlength="2" value="">
											</span>
      </td>
      <td id="Cell.4.4" style="text-Align: Center;vertical-align: Middle;background-color: #F8F8F8;width: 120px;border-color: black;border-width: 1px;border-left-style: Solid;border-right-style: Solid;border-top-style: Solid;border-bottom-style: Solid;">
        <div></div>
        <span style="">
												<div></div>
												<input type="text" name="_QPageB1_QGRB1_Q__04_QB1D" id="_Q0_Q3_Q3" class="mrEdit targetInput_14 rowA" autocomplete="on" style="width: 3em;" maxlength="2" value="">
											</span>
      </td>

    </tr>
    <tr>
      <td id="Cell.0.5" class="mrGridCategoryText" style="text-Align: Left;vertical-align: Middle;background-color: #D8D8D8;width: 300px;border-color: black;border-width: 1px;border-left-style: Solid;border-right-style: Solid;border-top-style: Solid;border-bottom-style: Solid;">
        <span class="mrQuestionText" style="font-size: 9pt;"><b>Oral Oncolytic</b>: Zydelig</span>
      </td>
      <td id="Cell.1.5" style="text-Align: Center;vertical-align: Middle;background-color: #D8D8D8;width: 120px;border-color: black;border-width: 1px;border-left-style: Solid;border-right-style: Solid;border-top-style: Solid;border-bottom-style: Solid;">
        <div></div>
        <span style="">
												<div></div>
												<input type="text" name="_QPageB1_QGRB1_Q__05_QB1A" id="_Q0_Q4_Q0" class="mrEdit targetInput_15 rowA" autocomplete="on" style="width: 3em;" maxlength="2" value="">
											</span>
      </td>
      <td id="Cell.2.5" style="text-Align: Center;vertical-align: Middle;background-color: #D8D8D8;width: 120px;border-color: black;border-width: 1px;border-left-style: Solid;border-right-style: Solid;border-top-style: Solid;border-bottom-style: Solid;">
        <div></div>
        <span style="">
												<div></div>
												<input type="text" name="_QPageB1_QGRB1_Q__05_QB1B" id="_Q0_Q4_Q1" class="mrEdit targetInput_16 rowA" autocomplete="on" style="width: 3em;" maxlength="2" value="">
											</span>
      </td>
      <td id="Cell.3.5" style="text-Align: Center;vertical-align: Middle;background-color: #D8D8D8;width: 120px;border-color: black;border-width: 1px;border-left-style: Solid;border-right-style: Solid;border-top-style: Solid;border-bottom-style: Solid;">
        <div></div>
        <span style="">
												<div></div>
												<input type="text" name="_QPageB1_QGRB1_Q__05_QB1C" id="_Q0_Q4_Q2" class="mrEdit targetInput_17 rowA" autocomplete="on" style="width: 3em;" maxlength="2" value="">
											</span>
      </td>
      <td id="Cell.4.5" style="text-Align: Center;vertical-align: Middle;background-color: #D8D8D8;width: 120px;border-color: black;border-width: 1px;border-left-style: Solid;border-right-style: Solid;border-top-style: Solid;border-bottom-style: Solid;">
        <div></div>
        <span style="">
												<div></div>
												<input type="text" name="_QPageB1_QGRB1_Q__05_QB1D" id="_Q0_Q4_Q3" class="mrEdit targetInput_18 rowA" autocomplete="on" style="width: 3em;" maxlength="2" value="">
											</span>
      </td>

    </tr>
    <tr>
      <td id="Cell.0.6" class="mrGridCategoryText" style="text-Align: Left;vertical-align: Middle;background-color: #F8F8F8;width: 300px;border-color: black;border-width: 1px;border-left-style: Solid;border-right-style: Solid;border-top-style: Solid;border-bottom-style: Solid;">
        <table style="vertical-align: middle; border-collapse: collapse; border: none;">
          <tbody>
            <tr>
              <td style="min-width: 60%; vertical-align: top;">

                Other(specify)
              </td>
              <td style="min-width: auto; vertical-align: top;" class="moved_GRB1_Other">
                <input type="text" name="_QPageB1_QB1__OS__1" id="_Q1" class="mrEdit targetInput_19 rowA" autocomplete="on" style="margin-left: 1em;width: 8em;" maxlength="1024" value="">
              </td>
            </tr>
          </tbody>
        </table>
      </td>
      <td id="Cell.1.6" style="text-Align: Center;vertical-align: Middle;background-color: #F8F8F8;width: 120px;border-color: black;border-width: 1px;border-left-style: Solid;border-right-style: Solid;border-top-style: Solid;border-bottom-style: Solid;">
        <div></div>
        <span style="">
												<div></div>
												<input type="text" name="_QPageB1_QGRB1_Q__Other_QB1A" id="_Q0_Q5_Q0" class="mrEdit targetInput_20 rowB rowA" autocomplete="on" style="width: 3em;" maxlength="2" value="">
											</span>
      </td>
      <td id="Cell.2.6" style="text-Align: Center;vertical-align: Middle;background-color: #F8F8F8;width: 120px;border-color: black;border-width: 1px;border-left-style: Solid;border-right-style: Solid;border-top-style: Solid;border-bottom-style: Solid;">
        <div></div>
        <span style="">
												<div></div>
												<input type="text" name="_QPageB1_QGRB1_Q__Other_QB1B" id="_Q0_Q5_Q1" class="mrEdit targetInput_21 rowA" autocomplete="on" style="width: 3em;" maxlength="2" value="">
											</span>
      </td>
      <td id="Cell.3.6" style="text-Align: Center;vertical-align: Middle;background-color: #F8F8F8;width: 120px;border-color: black;border-width: 1px;border-left-style: Solid;border-right-style: Solid;border-top-style: Solid;border-bottom-style: Solid;">
        <div></div>
        <span style="">
												<div></div>
												<input type="text" name="_QPageB1_QGRB1_Q__Other_QB1C" id="_Q0_Q5_Q2" class="mrEdit targetInput_22 rowA" autocomplete="on" style="width: 3em;" maxlength="2" value="">
											</span>
      </td>
      <td id="Cell.4.6" style="text-Align: Center;vertical-align: Middle;background-color: #F8F8F8;width: 120px;border-color: black;border-width: 1px;border-left-style: Solid;border-right-style: Solid;border-top-style: Solid;border-bottom-style: Solid;">
        <div></div>
        <span style="">
												<div></div>
												<input type="text" name="_QPageB1_QGRB1_Q__Other_QB1D" id="_Q0_Q5_Q3" class="mrEdit targetInput_23 rowA" autocomplete="on" style="width: 3em;" maxlength="2" value="">
											</span>
      </td>

    </tr>
    <tr>
      <td id="Cell.0.6" class="mrGridCategoryText" style="text-Align: Left;vertical-align: Middle;background-color: #F8F8F8;width: 300px;border-color: black;border-width: 1px;border-left-style: Solid;border-right-style: Solid;border-top-style: Solid;border-bottom-style: Solid;"><span class="rrSumColTotal">0</span>
      </td>
      <td id="Cell.1.6" style="text-align: center; vertical-align: middle; width: 120px; border: 1px solid black; background-color: rgb(170, 204, 238);" rowspan=""><span id="spRunningTotal1" class="rrRunningTotal" data-columnordinal="1">0</span>
      </td>




    </tr>
  </tbody>
  </table>
  </span>
</div>

最佳答案

在控制台中实现所需功能和动态一对一变量比率访问的 jQuery 方法是 .eq()。

var $inputBoxes = $('.rrSumColTotal').closest('table').find('tr td input[type=text]').not(':first');
var $gridRows = $('.rrSumColTotal').closest('table').find('tr');

//Create an array of TD amount per row

$.each($inputBoxes, function (i) {
    $inputBoxes.eq(i).addClass("targetInput_" + i);
});

//console.log($inputBoxes.length);
for (i = 0, z = $inputBoxes.length; i < z; i++){
    console.log($inputBoxes.eq(i).attr("class").toString());
}

jQuery Documentation

描述:将匹配元素集合减少到指定索引处的元素。

关于javascript - For 循环变量索引，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36723470/

上一篇：javascript - 使用 D3js 绘制 JSON 到 SVG 平面图

下一篇：javascript - jQuery datepicker future 一天的值

相关文章：

javascript - React.js setState 不工作

javascript - 从渲染事件访问时集合为空？

php - 如何将数据从javascript作为多维数组发送到PHP

javascript - 禁用基于类的选择元素选项

R:帮助编写复杂的 if 语句/for 循环来提取大象行为并将其制成表格

javascript - Highcharts 半饼图 - 删除饼图和图例之间的空间

javascript函数不返回预期的几何序列

jQuery 滑动切换不起作用？

java - 使用 for 循环将对象添加到数组时，最后添加的对象将用于所有实例

javascript - 为什么我的 jquery 循环对两个数组的值进行不正确的比较？

©2024 IT工具网  联系我们