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，App Settings中有两个，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'));
        }
    }
}

在jQuery中获取两个元素之间的所有元素（而不是子元素）

1 个答案: