用于循环变量索引

时间:2016-04-19 15:52:43

标签: javascript jquery for-loop console

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

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

请考虑以下代码:

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)之类的内容,但这些内容无效。

&#13;
&#13;
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());
}
&#13;
<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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

在控制台中实现所需功能的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

说明将匹配元素集合减少到指定索引处的元素。