How to sort Divs with diffrent contents in javascript?

Question

Suppoose I have HTML structure as below:

<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>

on load it is rendered as above i.e b2cList Order 10 Order 11 Order 10 12345 QO 1234 123456 Order10

Now, I want to sort in ascending order of the above structure as the below order: b2cList Order 10 Order 10 Order10 Order 11 QO 1234 12345 123456

The above HTML structure is one of column of a table like structure (here i am not using '<table>' tag). Now I want to sort the above column based on the text as mentioned above on a selecting an option from dropdown. I am using bubble sort. Here is code I have written so far.

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 + "\"");
        }
    }

Please help.

can you control the order it's being rendered in so it's already sorted when it loads? — ADyson, Sep 26 '18 at 09:32
Actually, The whole structure is rendered into Table style format (but not with tag) and want to sort one of the column as mentioned above on selecting an option from a dropdown. — bappa147, Sep 26 '18 at 09:40
Ok, well the "on selecting an option from a dropdown" is a pretty key part of the requirement which you didn't mention at all in the question. You should edit it to include that. Anyway, what have you researched or tried so far? This isn't a free do-my-research or write-my-code service. We'll _help_ you with a specific problem, we won't go and find a whole solution for you. For example if you search around I'd imagine there are probably existing JavaScript plugins which can help you sort HTML elements / data. Certainly if your data is in a real `` there are dozens of them — ADyson, Sep 26 '18 at 09:46
Ok thanks. And what goes wrong with your code? Give an example of what results you get currently, and what you expected, and also any errors it generates. Don't expect us to instantly comprehend the problem just by looking at it for a few seconds. — ADyson, Sep 26 '18 at 10:15
It does not give any error and also it does not give the expected results as I mentioned above. I want to rearrange the above structure by this sequence b2cList Order 10 Order 10 Order10 Order 11 QO 1234 12345 123456 — bappa147, Sep 26 '18 at 10:19
" it does not give the expected results"...well obviously, otherwise you wouldn't be asking. If you read my comment again, what I asked you to tell me was what result it _does_ give. — ADyson, Sep 26 '18 at 10:21
https://stackoverflow.com/questions/282670/easiest-way-to-sort-dom-nodes should help you. Just modify some of the code and it should be fine — Lorddirt, Sep 26 '18 at 10:51

score 0 · Answer 1 · edited Sep 26 '18 at 09:57

If you want to have your result in the more efficient way, you can do like this, by having the right order in the HTML directly

<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>

EDIT

I tried to add buttons that sort the results in numerical and/or alphabetic order. But it's more complex then having the right order in the HTML directly.

The post was not clear, I answered to the question with the few informations that I had... — LPK, Sep 27 '18 at 14:31

How to sort Divs with diffrent contents in javascript?

1 Answers1