Question

我从共享点列表中提取了大量节点，我会尝试按顺序将它们排序到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：行（在这种情况下为li）要经过？

Answer 1

我使用以下内容修改了您自己的代码：
- 减少附加：迭代生成一个字符串而不是多个附加，因此对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>

Answer 2

这和它一样简短而甜蜜。此外，每次单击时，这将使您的文本条目倍增，因此您可以看到它在更大时的处理方式。

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

它也会自动滚动，所以你可以继续按下按钮......

如果它对系统有帮助，我目前在[HP ProBook 650 G1 Win7 Pro64]上，在Chrome中它没有开始减速直到按钮的点击次数大约为100，在FF大约95和之后IE Edge，也是100左右。那就是ul文本100 次

对大量DOM元素进行排序

2 个答案: