Pat February 2016

Sorting large number of DOM elements

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?

Answers


SpYk3HH February 2016

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) 


Sergey Gurevich February 2016

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>";
                                brea 

Post Status

Asked in February 2016
Viewed 2,898 times
Voted 14
Answered 2 times

Search




Leave an answer