我正在从sharepoint列表中提取大量节点，我会尝试将它们排序成一个html表，希望有条不紊地进行。 我需要这样做的方法是我需要将这些z：行拆分为5个不同的表。 示例应该是自解释的： https://jsfiddle.net/jse21z9d/1/ ： 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：行（li in这个案子）要经历？
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?
最满意答案
我使用以下代码修改了您自己的代码： - 较少追加：迭代生成一个字符串而不是多个附加，因此对DOM的操作较少。 - 减少搜索：即使按ID搜索通常也很容易搜索。 它仍然可以更好地执行一次，并附加生成的字符串。
资料来源： 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>
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>
更多推荐
发布评论