使用 jQuery 迭代行直到到达特定元素

Question

我有一张这样的桌子：

<table class="wide" id="rbi_gridTable_0">
<thead>
    <tr class="objectListHeader">
        <th>Item Name</th>
        <th>Yes or No</th>
    </tr>
</thead>
<tbody>
    <tr class="groupRow" id="groupRow0"><td colspan="2"><b>CATEGORY 0</b></td><td><b>Yes <a href="javascript:jl_no(0);">No</a></b></td></tr>
    <tr id="rbi_gridRow_0_0">
        <td>Line item 0</td>
        <td id="rbi_grid_0_0_Met_NotMet">
            <input type="radio" name="Met_NotMet_0_0" code="Y">Yes<br/>
            <input type="radio" name="Met_NotMet_0_0" code="X">No
        </td>
    </tr>
    <tr id="rbi_gridRow_0_1">
        <td>Line item 1</td>
        <td id="rbi_grid_0_1_Met_NotMet">
            <input type="radio" name="Met_NotMet_0_1" code="Y">Yes<br/>
            <input type="radio" name="Met_NotMet_0_1" code="X">No
        </td>
    </tr>
    <tr id="rbi_gridRow_0_2">
        <td>Line item 2</td>
        <td id="rbi_grid_0_2_Met_NotMet">
            <input type="radio" name="Met_NotMet_0_2" code="Y">Yes<br/>
            <input type="radio" name="Met_NotMet_0_2" code="X">No
        </td>
    </tr>
    <tr class="groupRow" id="groupRow1"><td colspan="2"><b>CATEGORY 1</b></td><td><b>Yes <a href="javascript:jl_no(1);">No</a></b></td></tr>
    <tr id="rbi_gridRow_0_3">
        <td>Line item 3</td>
        <td id="rbi_grid_0_3_Met_NotMet">
            <input type="radio" name="Met_NotMet_0_3" code="Y">Yes<br/>
            <input type="radio" name="Met_NotMet_0_3" code="X">No
        </td>
    </tr>
    <tr class="groupRow" id="groupRow2"><td colspan="2"><b>CATEGORY 2</b></td><td><b>Yes <a href="javascript:jl_no(2);">No</a></b></td></tr>
    <tr id="rbi_gridRow_0_4">
        <td>Line item 4</td>
        <td id="rbi_grid_0_4_Met_NotMet">
            <input type="radio" name="Met_NotMet_0_4" code="Y">Yes<br/>
            <input type="radio" name="Met_NotMet_0_4" code="X">No
        </td>
    </tr>
</tbody>    
</table>

我希望能够单击每个类别行中的“否”链接，并在单击时致电jl_no()。该类别行下方的单选字段应设置为 NO (code="X")。

但是，当我们到达下一个类别行时，我想停止设置 NO 单选字段。这样做的目的是允许用户在类别标题中选择“否”，这将仅选中该类别的所有“否”框。

例如：

• 单击（类别 0）行中的 NO 链接应为 #rbi_gridRow_0_0、#rbi_gridRow_0_1 和 #rbi_gridRow_0_2 设置 NO 单选字段。

• 单击（类别 1）行中的 NO 链接应仅为 #rbi_gridRow_0_3 设置 NO 单选字段。

到目前为止，这是我尝试过的：

function jl_no(idx)
{
    $('#rbi_gridTable_0 tr').each(function (i, row){
        console.log(i,row);
        console.log($(this).attr("id"));

        //stop when we get to the next #groupRow
        if($(this).attr("id") == "groupRow"+(idx+1))
        {
            return;
        }

        $("[name='Met_NotMet_0_" + idx + "'] [code='X']").prop("checked",true);
    });
}

Answer 1

获取被点击的“否”所在的行；然后查看后续行（使用.next()），直到找到具有“groupRow”类的行。

function jl_no(idx) {
  var prevTr = $('#groupRow' + idx),
      nextTr = prevTr.next('tr');

  while ((nextTr.length > 0) && !nextTr.hasClass('groupRow')) {
    $("input[code='X']", nextTr).prop('checked', true);

    prevTr = nextTr;
    nextTr = prevTr.next('tr');
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="wide" id="rbi_gridTable_0">
  <thead>
    <tr class="objectListHeader">
      <th>Item Name</th>
      <th>Yes or No</th>
    </tr>
  </thead>
  <tbody>
    <tr class="groupRow" id="groupRow0">
      <td colspan="2"><b>CATEGORY 0</b></td>
      <td><b>Yes <a href="javascript:jl_no(0);">No</a></b></td>
    </tr>
    <tr id="rbi_gridRow_0_0">
      <td>Line item 0</td>
      <td id="rbi_grid_0_0_Met_NotMet">
        <input type="radio" name="Met_NotMet_0_0" code="Y">Yes<br/>
        <input type="radio" name="Met_NotMet_0_0" code="X">No
      </td>
    </tr>
    <tr id="rbi_gridRow_0_1">
      <td>Line item 1</td>
      <td id="rbi_grid_0_1_Met_NotMet">
        <input type="radio" name="Met_NotMet_0_1" code="Y">Yes<br/>
        <input type="radio" name="Met_NotMet_0_1" code="X">No
      </td>
    </tr>
    <tr id="rbi_gridRow_0_2">
      <td>Line item 2</td>
      <td id="rbi_grid_0_2_Met_NotMet">
        <input type="radio" name="Met_NotMet_0_2" code="Y">Yes<br/>
        <input type="radio" name="Met_NotMet_0_2" code="X">No
      </td>
    </tr>
    <tr class="groupRow" id="groupRow1">
      <td colspan="2"><b>CATEGORY 1</b></td>
      <td><b>Yes <a href="javascript:jl_no(1);">No</a></b></td>
    </tr>
    <tr id="rbi_gridRow_0_3">
      <td>Line item 3</td>
      <td id="rbi_grid_0_3_Met_NotMet">
        <input type="radio" name="Met_NotMet_0_3" code="Y">Yes<br/>
        <input type="radio" name="Met_NotMet_0_3" code="X">No
      </td>
    </tr>
    <tr class="groupRow" id="groupRow2">
      <td colspan="2"><b>CATEGORY 2</b></td>
      <td><b>Yes <a href="javascript:jl_no(2);">No</a></b></td>
    </tr>
    <tr id="rbi_gridRow_0_4">
      <td>Line item 4</td>
      <td id="rbi_grid_0_4_Met_NotMet">
        <input type="radio" name="Met_NotMet_0_4" code="Y">Yes<br/>
        <input type="radio" name="Met_NotMet_0_4" code="X">No
      </td>
    </tr>
  </tbody>
</table>