Использование 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, когда мы достигнем следующей строки категории. Смысл этого состоит в том, чтобы позволить пользователю выбрать NO в заголовке категории, и это будет проверять все поля NO только для этой категории.

Например:

• Нажав на ссылку NO в строке (Категория 0), вы должны установить поле радио NO для #rbi_gridRow_0_0, #rbi_gridRow_0_1, а также #rbi_gridRow_0_2,

• Если щелкнуть ссылку "НЕТ" в строке (Категория 1), поле "НЕТ" должно быть установлено на #rbi_gridRow_0_3 только.

Вот что я попробовал до сих пор:

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>