Получение всех элементов (не дочерних) между двумя элементами в jQuery

Question

У меня есть элемент управления GridView (ASP.NET), который содержит переменное количество строк, а иногда и другой GridView. Существуют строки «заголовка», которые просто охватывают определенный класс CSS, и под каждым «заголовком» может быть любое количество <tr> строк или даже дополнительных таблиц.

Сетка разделена на ячейки "заголовка" и затем обычные ячейки (есть также подзаголовки, но для моих целей они являются обычными ячейками). То, что мне нужно сделать, это получить список всех элементов (я могу отфильтровать его позже, начиная с основ), между одним элементом заголовка и следующим элементом заголовка.

Я пытался использовать метод nextUntil, но он не работает должным образом и не дает мне все элементы между двумя заголовками (похоже, он только дает мне элементы внутри этой конкретной строки; там может быть много строк tr между каждой строкой заголовка).

Вот урезанная HTML-таблица, иллюстрирующая обычную настройку:

<table class="adminList">
  <tr>
    <td>
      <table id="gvConcepts" rules="cols" cellspacing="0"
      cellpadding="3" border="1">
        <tbody>
          <tr>
            <td>
              <div class="permissionsList">
                <span id="lblConceptGroupName1" class="header">
                API</span>
                <input id="chkCanView1" type="checkbox">
                View</input>
                <input id="chkCanUpdate2" type="checkbox">
                Update</input>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="permissionsList">
                <span id="lblConceptGroupName2" class="header">
                Billing</span>
                <input type="checkbox">View</input>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="permissionsList">
                <span id="lblConceptGroupName3" class="header">
                Config</span>
                <span class="subheading">Accessorials</span>
                <input type="checkbox">View</input>
                <input type="checkbox">Add</input>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="permissionsList">
                <span class="subheading">App Settings</span>
                <input type="checkbox">View</input>
                <input type="checkbox">Update</input>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="permissionsList">
                <span class="subheading">Carrier</span>
                <input type="checkbox">View</input>
                <input type="checkbox">Add</input>
                <input type="checkbox">Update</input>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="permissionsList">
                <span id="lblConceptGroupName4" class="header">
                Email Configuration</span>
                <input type="checkbox">View</input>
                <input type="checkbox">Add</input>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="permissionsList">
                <span class="subheading">Email Message</span>
                <input type="checkbox">View</input>
                <input type="checkbox">Update</input>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </td>
  </tr>
</table>

Так, например, в разделе «Конфигурация электронной почты» есть четыре флажка (два непосредственно рядом со столбцом заголовка Email Configuration и два в подзаголовке Email Message). В области Config есть семь (по два в Config, Accessorials, Настройки приложения и три в Carrier).

Как бы я поступил так? Я не уверен, что воссоздание таблицы лучшим способом является жизнеспособным вариантом в данный момент, но если это будет более простой способ (я понимаю, что это может быть причиной проблемы, так как структура HTML неэффективна), я рекомендую ее .

Answer 1

Одна идея:

$(document).ready(function() {
    var headerArray = new Array();
    var trs = $('#gvConcepts').find('tr');
    var elemArray = null;

    trs.each(function(){
        $this = $(this);
        if($this.find('span.header').length>0){//new element array
            if(elemArray != null){
                headerArray.push(elemArray);
            }
            elemArray = new Array();
            loadElementsFromRow(elemArray,$this);
        }else{
            if(elemArray != null){//don't start until header is found
                loadElementsFromRow(elemArray,$this);
            }
        }
    });
    if(elemArray != null){
        headerArray.push(elemArray);
    }
    test(headerArray);

});
function loadElementsFromRow(a, r){
    //r.find('*') to get every element
    r.find('input').each(function(){
        a.push($(this));
    });
}

function test(headerArray){
    console.log('headerArray.length: '+ headerArray.length);
    for(var i=0; i<headerArray.length; i++){
        console.log('######################### header index: '+ i);
        var elements = headerArray[i];
        console.log('elements.length: '+ elements.length);
        for(var j=0; j<elements.length; j++){
            var e = elements[j];
            console.log('Element: ' + e.attr('id'));
        }
    }
}