Сортировка большого количества элементов DOM

Question

Я вытаскиваю большое количество узлов из списка sharepoint, и я попытаюсь отсортировать их в html-таблице, надеюсь, упорядоченным образом. Мне нужно сделать это: мне нужно разбить эти строки z на 5 разных таблиц. Пример должен быть Спроецировать 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;   
        } 

      }); 
     }); 

    }); 
}); 

так это то, что я получил до сих пор, и мне интересно, может быть, есть лучший способ сделать это, как я думаю, что это код, который я написал может замедлить всю нагрузку вверх если мы говорим о 1000+ z: rows (li в этом случае), чтобы пройти?

Answer 1

Я изменил свой собственный код следующим образом:
- Меньше приложений: итерации генерируют строку вместо нескольких добавлений, таким образом, меньшее количество действий выполняется над DOM.
- Меньше поисков: хотя поиск по ID обычно является легким поиском. Его еще лучше выполнить его один раз и добавить сгенерированную строку.

Источник: https://jsfiddle.net/mamtkjw4/

$(document).ready(function(){ 
 
     
 
     $('#execB').click(function(){ 
 
     
 
     \t 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): 
 
          \t \t polStr = polStr + liText+"<br>"; 
 
           break;  
 
          case (textArray[index].indexOf('uk') != -1) 
 
          \t \t \t || (textArray[index].indexOf('ire') != -1): 
 
          \t \t ukStr = ukStr + liText+"<br>"; 
 
           break; 
 
          case (textArray[index].indexOf('ger') != -1): 
 
          \t \t gerStr = gerStr + liText+"<br>"; 
 
           break; 
 
          case (textArray[index].indexOf('san') != -1): 
 
          \t \t sanStr = sanStr + liText+"<br>"; 
 
           break;   
 
         } 
 
        
 
       }); 
 
      }); 
 
      
 
      
 
     \t \t if (polStr) { 
 
      \t $('#polDiv').append(polStr+"<br>"); 
 
      } 
 
      
 
      if (ukStr) { 
 
      \t $('#ukDiv').append(ukStr+"<br>"); 
 
      } 
 
      
 
      if (gerStr) { 
 
      \t $('#gerDiv').append(gerStr+"<br>"); 
 
      } 
 
      
 
      if (sanStr) { 
 
      \t $('#sanDiv').append(sanStr+"<br>"); 
 
      } 
 
      
 
      
 
     }); 
 
    });

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

<button id="execB">execB</button> 
 
\t <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

Это примерно такое короткое и сладкое, как оно есть. Кроме того, это будет умножать вашу текстовую запись каждый раз, когда вы нажимаете, так что вы можете видеть, как она обрабатывается, поскольку она получает больше.

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

.holders{ 
 
\t background: gray; 
 
\t width: 100px; 
 
\t height: 200px; 
 
\t margin-left: 15px; 
 
\t margin-bottom: 15px; 
 
\t 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"> 
 
\t <li>(UK/IRE, POL)</li> 
 
\t <li>(UK/IRE)</li> 
 
\t <li>(POL)</li> 
 
\t <li>(SAN)</li> 
 
\t <li>(GER, POL)</li> 
 
\t <li>(GER)</li> 
 
\t <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>

Также он будет автоматически прокрутки, так что вы можете просто нажать и удерживать клавишу ...

Если это поможет любому, в системе я в данный момент [HP ProBook 650 G1 Win7 Pro64], в Chrome он не начинал замедляться, пока количество кликов на кнопке не было около 100, на FF около 95 и на IE Edge, также около 100. Это было бы так: ul текст 100 раз