Question

假设我的HTML结构如下：

<div class="fullView" id="listParent" style="display: block;">
    <div role="row" class="row entry" id="1">
        <div class="col2 name" role="gridcell">         
            <div class="cell fileName" id="WC_RequisitionList_TableContent_name_1">     
                <a href="#" id="WC_RequisitionList_Link_2_1">b2cList</a>    
            </div>
        </div>
    </div>
    <div role="row" class="row entry" id="2">
        <div class="col2 name" role="gridcell">         
            <div class="cell fileName" id="WC_RequisitionList_TableContent_name_1"> 
                <a href="#" id="WC_RequisitionList_Link_2_1">Order 10</a>   
            </div>
        </div>
    </div>
    <div role="row" class="row entry" id="3">
        <div class="col2 name" role="gridcell">         
            <div class="cell fileName" id="WC_RequisitionList_TableContent_name_1"> 
                <a href="#" id="WC_RequisitionList_Link_2_1">Order 11</a>   
            </div>
        </div>
    </div>
    <div role="row" class="row entry" id="4">
        <div class="col2 name" role="gridcell">         
            <div class="cell fileName" id="WC_RequisitionList_TableContent_name_1"> 
                <a href="#" id="WC_RequisitionList_Link_2_1">Order 10</a>   
            </div>
        </div>
    </div>
    <div role="row" class="row entry" id="5">
        <div class="col2 name" role="gridcell">         
            <div class="cell fileName" id="WC_RequisitionList_TableContent_name_1"> 
                <a href="#" id="WC_RequisitionList_Link_2_1">12345</a>  
            </div>
        </div>
    </div>
    <div role="row" class="row entry" id="6">
        <div class="col2 name" role="gridcell">         
            <div class="cell fileName" id="WC_RequisitionList_TableContent_name_1"> 
                <a href="#" id="WC_RequisitionList_Link_2_1">QO</a> 
            </div>
        </div>
    </div>
    <div role="row" class="row entry" id="7">
        <div class="col2 name" role="gridcell">         
            <div class="cell fileName" id="WC_RequisitionList_TableContent_name_1"> 
                <a href="#" id="WC_RequisitionList_Link_2_1">1234</a>   
            </div>
        </div>
    </div>
    <div role="row" class="row entry" id="8">
        <div class="col2 name" role="gridcell">         
            <div class="cell fileName" id="WC_RequisitionList_TableContent_name_1"> 
                <a href="#" id="WC_RequisitionList_Link_2_1">123456</a> 
            </div>
        </div>
    </div>
    <div role="row" class="row entry" id="9">
        <div class="col2 name" role="gridcell">         
            <div class="cell fileName" id="WC_RequisitionList_TableContent_name_1"> 
                <a href="#" id="WC_RequisitionList_Link_2_1">Order10</a>    
            </div>
        </div>
    </div>
</div>

在加载时如上所示，即 b2cList 订单10 订单11 订单10 12345 质量保证 1234 123456 Order10

现在，我想按上述结构的升序按以下顺序排序： b2cList 订单10 订单10 订购10 订单11 质量保证 1234 12345 123456

上面的HTML结构是类似表的表的列之一（这里我没有使用'<table>'标签）。现在，我要根据上面提到的文本从下拉菜单中选择一个选项来对以上列进行排序。我正在使用冒泡排序。这是我到目前为止编写的代码。

var a = document.getElementById("listParent");
    for ( var i = 0; i < a.childNodes.length; i++) {
        var swapped = false;
        for ( var j = 1; j < a.childNodes.length; j++) {
            var divId = document.getElementById('WC_orderSearchResultsArea_Link_2_' + (j - 1));
            if (divId) {
                var listName = divId.innerHTML.toLowerCase();
                if (listName) {
                    var innerDivId = document.getElementById('WC_orderSearchResultsArea_Link_2_' + j);
                    if (innerDivId) {
                        var innerId = innerDivId.innerHTML.toLowerCase();
                            var firstNum = Number(listName);
                            var secondNum = Number(innerId);
                            if(Number.isNaN(firstNum) && Number.isNaN(secondNum)) {
                                if (listName > innerId) {
                                    swapped = true;
                                    swap(j - 1, j);
                                }
                            }
                            if(firstNum > secondNum) {
                                    swapped = true;
                                    swap(j - 1, j);
                            }
                    }
                }
            }
        }
        if (swapped == false) {
            break;
        }
    }

swap = function(firstRowIndex, secondRowIndex) {
        var firstRow = document.getElementById(firstRowIndex);
        var secondRow = document.getElementById(secondRowIndex);
        if (firstRow && secondRow) {
            var tmp = firstRow.innerHTML;
            firstRow.innerHTML = secondRow.innerHTML.replace(/_\d+\"/g, "_" + firstRowIndex + "\"");
            secondRow.innerHTML = tmp.replace(/_\d+\"/g, "_" + secondRowIndex + "\"");
        }
    }

请帮助。

Answer 1

如果您想以更有效的方式获得结果，可以通过直接在HTML中正确排序

<div class="fullView" id="listParent" style="display: block;">
  <div role="row" class="row entry" id="1">
    <div class="col2 name" role="gridcell">
      <div class="cell fileName" id="WC_RequisitionList_TableContent_name_1">
        <a href="#" id="WC_RequisitionList_Link_2_1">b2cList</a>
      </div>
    </div>
  </div>
  <div role="row" class="row entry" id="2">
    <div class="col2 name" role="gridcell">
      <div class="cell fileName" id="WC_RequisitionList_TableContent_name_1">
        <a href="#" id="WC_RequisitionList_Link_2_1">Order 10</a>
      </div>
    </div>
  </div>
  <div role="row" class="row entry" id="4">
    <div class="col2 name" role="gridcell">
      <div class="cell fileName" id="WC_RequisitionList_TableContent_name_1">
        <a href="#" id="WC_RequisitionList_Link_2_1">Order 10</a>
      </div>
    </div>
  </div>
  <div role="row" class="row entry" id="9">
    <div class="col2 name" role="gridcell">
      <div class="cell fileName" id="WC_RequisitionList_TableContent_name_1">
        <a href="#" id="WC_RequisitionList_Link_2_1">Order10</a>
      </div>
    </div>
    <div role="row" class="row entry" id="3">
      <div class="col2 name" role="gridcell">
        <div class="cell fileName" id="WC_RequisitionList_TableContent_name_1">
          <a href="#" id="WC_RequisitionList_Link_2_1">Order 11</a>
        </div>
      </div>
    </div>
    <div role="row" class="row entry" id="6">
      <div class="col2 name" role="gridcell">
        <div class="cell fileName" id="WC_RequisitionList_TableContent_name_1">
          <a href="#" id="WC_RequisitionList_Link_2_1">QO</a>
        </div>
      </div>
    </div>
    <div role="row" class="row entry" id="7">
      <div class="col2 name" role="gridcell">
        <div class="cell fileName" id="WC_RequisitionList_TableContent_name_1">
          <a href="#" id="WC_RequisitionList_Link_2_1">1234</a>
        </div>
      </div>
    </div>
    <div role="row" class="row entry" id="5">
      <div class="col2 name" role="gridcell">
        <div class="cell fileName" id="WC_RequisitionList_TableContent_name_1">
          <a href="#" id="WC_RequisitionList_Link_2_1">12345</a>
        </div>
      </div>
    </div>
    <div role="row" class="row entry" id="8">
      <div class="col2 name" role="gridcell">
        <div class="cell fileName" id="WC_RequisitionList_TableContent_name_1">
          <a href="#" id="WC_RequisitionList_Link_2_1">123456</a>
        </div>
      </div>
    </div>
  </div>

编辑

我试图添加按钮，以按数字和/或字母顺序对结果进行排序。但是比直接在HTML中具有正确的顺序要复杂得多。

如何在javascript中对具有不同内容的Divs进行排序？

1 个答案: