動的構成domの順序

ページ上のdom要素について、1つの配列でdom要素のセットの順序を決定するには、vue elementが簡単であれば実現できます.

 

                
{{item.name}}
        

js:

...

data：function(){
    return{
            lidata:[{"id":"1","name":"  "},
            {"id":"2","name":"  "},
            {"id":"3","name":"  "}]
    } 

}

...

でもjqueryならどうするの?1つ1つ比較した後の再挿入効率はやや低い
だから私は簡単な最適化をしました

farraysort: function (keyarray) {
            //     e1,e2  div  id
            /**
             * [e1:  
             *,e2,  
             * e3,
             * e4];
             */
            // keyarray = ["e1, "e2", "e3", "e4",];//   
            var oldKeyarray = JSON.parse(localStorage.getItem("sortKey"));
            var issame = true;//         
            if (oldKeyarray) {
                console.log(oldKeyarray.construct);
                oldKeyarray.forEach(function (item, index) {
                    if (item !== keyarray[index]) {
                        issame = false;
                        return;
                    }
                });
                if (issame) {//            。      
                    return;
                } else {
                    localStorage.setItem("sortKey", JSON.stringify(keyarray));
                }
            } else {//      ，    
                localStorage.setItem("sortKey", JSON.stringify(keyarray));
            }

                        //   dom            
            var array =
            {
                "e1": document.getElementById("e1"),
                "e2": document.getElementById("e2"),
                "e3": document.getElementById("e3"),
                "e4": document.getElementById("e4")
            };
                        //  Fragment

            var elementfrag = document.createDocumentFragment();
            keyarray.forEach(function (item) {//  dom  
                elementfrag.appendChild(array[item]);
            });
                        //     
            document.getElementById("sortContainer").appendChild(elementfrag);

        }

              diff           ，