Sorting large number of DOM elements

Question

I'm pulling a large number of nodes from sharepoint list and I'll try to sort them into a html table hopefully in orderly fashion. The way i need to do this is I need to split these z:rows into 5 different tables. Example should be self explanatory: https://jsfiddle.net/jse21z9d/1/

$(document).ready(function(){

    $('#execB').click(function(){
        $('.myUl li').each(function(){

            var liText = $(this).text().toLowerCase();
            var newliText = liText.replace(/[{()}]/g, "");
            var textArray = newliText.split(/[,]/);
            console.log(textArray);

            $(textArray).each(function(index){
                    switch(true){
                        case (textArray[index].indexOf('pol') != -1):
                            $('#polDiv').append(liText+"<br>");
                            break;    
                        case (textArray[index].indexOf('uk') != -1)
                                    || (textArray[index].indexOf('ire') != -1):   
                            $('#ukDiv').append(liText+"<br>");
                            break;
                        case (textArray[index].indexOf('ger') != -1):
                            $('#gerDiv').append(liText+"<br>");
                            break;
                        case (textArray[index].indexOf('san') != -1):
                            $('#sanDiv').append(liText+"<br>");
                            break;        
                    }

            });
        });

    });
});

so that's what i got so far, and I'm wondering maybe there is a better way to do this as I think this code I wrote might slow the entire load up a lot if we are talking about 1000+ z:rows(li in this case) to go through?

Answer 1

I modified your own code with the following:
- Less appends: The iterations generate a string instead of multiple appends thus less actions are done over the DOM.
- Less searches: Even though a search by ID is generally an easy search. Its still better to execute the it once, and append the generated string.

Source: https://jsfiddle.net/mamtkjw4/

 $(document).ready(function(){ $('#execB').click(function(){ var polStr = ""; var ukStr = ""; var gerStr = ""; var sanStr = ""; $('.myUl li').each(function(){ var liText = $(this).text().toLowerCase(); var newliText = liText.replace(/[{()}]/g, ""); var textArray = newliText.split(/[,]/); console.log(textArray); $(textArray).each(function(index){ switch(true){ case (textArray[index].indexOf('pol') != -1): polStr = polStr + liText+"<br>"; break; case (textArray[index].indexOf('uk') != -1) || (textArray[index].indexOf('ire') != -1): ukStr = ukStr + liText+"<br>"; break; case (textArray[index].indexOf('ger') != -1): gerStr = gerStr + liText+"<br>"; break; case (textArray[index].indexOf('san') != -1): sanStr = sanStr + liText+"<br>"; break; } }); }); if (polStr) { $('#polDiv').append(polStr+"<br>"); } if (ukStr) { $('#ukDiv').append(ukStr+"<br>"); } if (gerStr) { $('#gerDiv').append(gerStr+"<br>"); } if (sanStr) { $('#sanDiv').append(sanStr+"<br>"); } }); }); 

  .holders{ background: gray; width: 100px; height: 200px; margin-left: 15px; margin-bottom: 15px; float: left; } 

 <button id="execB">execB</button> <ul class="myUl"> <li>(UK/IRE, POL)</li> <li>(UK/IRE)</li> <li>(POL)</li> <li>(SAN)</li> <li>(GER, POL)</li> <li>(GER)</li> <li>(SAN, UK/IRE)</li> </ul> <div id="gerDiv" class="holders"><p>german div:</p><ul></ul></div> <div id="ukDiv" class="holders"><p>uk/ire div:</p><ul></ul></div> <div id="polDiv" class="holders"><p>pol div:</p><ul></ul></div> <div id="sanDiv" class="holders"><p>san div:</p><ul></ul></div> 

Answer 2

This is about as short and sweet as it gets. Also, this will multiply your text entry every time you click, so you can see how it handles as it gets larger .

 $(document).ready(function() { var clickCount = 1; $("#execB").on("click", function() { clickCount++; $(this).text("Count("+clickCount+")"); $(".myUl li").each(function() { var liText = new Array(clickCount).join($(this).text().toLowerCase() + "\\n"), textArray = liText.replace(/[{()}]/g, "").split(/[,]/); $(textArray).each(function(i) { switch (!0) { case -1 != textArray[i].indexOf("pol"): $("#polDiv").append(liText + "<br>"); break; case -1 != textArray[i].indexOf("uk") || -1 != textArray[i].indexOf("ire"): $("#ukDiv").append(liText + "<br>"); break; case -1 != textArray[i].indexOf("ger"): $("#gerDiv").append(liText + "<br>"); break; case -1 != textArray[i].indexOf("san"): $("#sanDiv").append(liText + "<br>") } }); }); $(document).scrollTop($(document).height()); }) }); 

 .holders{ background: gray; width: 100px; height: 200px; margin-left: 15px; margin-bottom: 15px; float: left; } button { position: fixed; top: .6em; } ul { margin-top: 2.25em; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="execB">execB</button> <ul class="myUl"> <li>(UK/IRE, POL)</li> <li>(UK/IRE)</li> <li>(POL)</li> <li>(SAN)</li> <li>(GER, POL)</li> <li>(GER)</li> <li>(SAN, UK/IRE)</li> </ul> <div id="gerDiv" class="holders"><p>german div:</p><ul></ul></div> <div id="ukDiv" class="holders"><p>uk/ire div:</p><ul></ul></div> <div id="polDiv" class="holders"><p>pol div:</p><ul></ul></div> <div id="sanDiv" class="holders"><p>san div:</p><ul></ul></div> 

Also it will auto scroll so you can just keep pushing the button ...

If it helps any, on system I'm currently on [HP ProBook 650 G1 Win7 Pro64], in Chrome, it didn't start slowing down till count of clicks on button was around 100, on FF around 95 and on IE Edge, also around 100. That would be that ul text 100 times