変数に格納されたdivコンテンツをソートする

Question

誰もがこれを見て、より良い解決策を提供してくれます。私はすでにこれについて私の頭を叩いて、あなたが解決するために私を助けることができれば。あなたは覚えられるでしょう。

質問：以下のdiv値を保持する変数があります。私はそれを動的に構築しており、それをアルファベット順にソートして表示したい。

Var toSort = "<div class='touchpoint_filterattributes' id='BODIVID_1571' style = 'background:#b7b7b7;'><div class='color_box_label' style = 'color:#000000;'>Customer Experience Team</div></div><br/><div class='touchpoint_filterattributes' id='BODIVID_1567' style = 'background:#b7b7b7;'><div class='color_box_label' style = 'color:#000000;'>1234</div></div><br/><div class='touchpoint_filterattributes' id='BODIVID_1569' style = 'background:#b7b7b7;'><div class='color_box_label' style = 'color:#000000;'>Claims</div></div><br/><div class='touchpoint_filterattributes' id='BODIVID_1266' style = 'background:#C9C9C9;'><div class='color_box_label' style = 'color:#000000;'>Claims</div></div><br/><div class='touchpoint_filterattributes' id='BODIVID_1570' style = 'background:#b7b7b7;'><div class='color_box_label' style = 'color:#000000;'>Corporate Communication</div></div><br/><div class='touchpoint_filterattributes' id='BODIVID_1260' style = 'background:#C9C9C9;'><div class='color_box_label' style = 'color:#000000;'>Claims</div></div><br/>" 

上記のコードでは、div要素IDが動的に割り当てられます。親切にも問題の解決に役立ちます。

Answer 1

まずは配列を使用し、最初にjqueryで要素を作成してアクセスしやすくします。あなたは簡単に "localecompare"

var yourElements = []; 
 

 
yourElements.push($("<div class='touchpoint_filterattributes' id='BODIVID_1571' style = 'background:#b7b7b7;'><div class='color_box_label' style = 'color:#000000;'>Customer Experience Team</div></div>")[0]); 
 
yourElements.push($("<div class='touchpoint_filterattributes' id='BODIVID_1567' style = 'background:#b7b7b7;'><div class='color_box_label' style = 'color:#000000;'>1234</div></div>")[0]); 
 
yourElements.push($("<div class='touchpoint_filterattributes' id='BODIVID_1569' style = 'background:#b7b7b7;'><div class='color_box_label' style = 'color:#000000;'>Claims</div></div>")[0]); 
 
yourElements.push($("<div class='touchpoint_filterattributes' id='BODIVID_1266' style = 'background:#C9C9C9;'><div class='color_box_label' style = 'color:#000000;'>Claims</div></div>")[0]); 
 
yourElements.push($("<div class='touchpoint_filterattributes' id='BODIVID_1570' style = 'background:#b7b7b7;'><div class='color_box_label' style = 'color:#000000;'>Corporate Communication</div></div>")[0]); 
 

 
yourElements.sort(function(a,b) 
 
{ 
 

 
return a.innerText.localeCompare(b.innerText); 
 

 
}); 
 

 
console.log(yourElements);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

でそれを並べ替えることができるより

は次のようにidでソート意味しますか？

toSort = "<div class='touchpoint_filterattributes' id='BODIVID_1571' style = 'background:#b7b7b7;'><div class='color_box_label' style = 'color:#000000;'>Customer Experience Team</div></div><br/><div class='touchpoint_filterattributes' id='BODIVID_1567' style = 'background:#b7b7b7;'><div class='color_box_label' style = 'color:#000000;'>1234</div></div><br/><div class='touchpoint_filterattributes' id='BODIVID_1569' style = 'background:#b7b7b7;'><div class='color_box_label' style = 'color:#000000;'>Claims</div></div><br/><div class='touchpoint_filterattributes' id='BODIVID_1266' style = 'background:#C9C9C9;'><div class='color_box_label' style = 'color:#000000;'>Claims</div></div><br/><div class='touchpoint_filterattributes' id='BODIVID_1570' style = 'background:#b7b7b7;'><div class='color_box_label' style = 'color:#000000;'>Corporate Communication</div></div><br/><div class='touchpoint_filterattributes' id='BODIVID_1260' style='background:#C9C9C9;'><div class='color_box_label' style = 'color:#000000;'>Claims</div></div><br/>"; 
 

 
a = toSort.split("<br/>"); 
 
obj = {} 
 
for(key in a){ 
 
\t id = a[key].substr(53,4); 
 
    obj[id] = a[key]; 
 
} 
 
newhtml = ""; 
 
for(key in obj){ 
 
\t newhtml += obj[key]+"<br/>"; 
 
} 
 
console.log(newhtml);

Answer 3

これはまさにあなたが必要なものを達成するための最適な方法です。既に回答は少ないですが。これを確認していただきたい。アルファベット順

$(document).ready(function(){ 
 

 
var toSort = "<div class='touchpoint_filterattributes' id='BODIVID_1571' style = 'background:#b7b7b7;'><div class='color_box_label' style = 'color:#000000;'>Customer Experience Team</div></div><br/><div class='touchpoint_filterattributes' id='BODIVID_1567' style = 'background:#b7b7b7;'><div class='color_box_label' style = 'color:#000000;'>1234</div></div><br/><div class='touchpoint_filterattributes' id='BODIVID_1569' style = 'background:#b7b7b7;'><div class='color_box_label' style = 'color:#000000;'>Claims</div></div><br/><div class='touchpoint_filterattributes' id='BODIVID_1266' style = 'background:#C9C9C9;'><div class='color_box_label' style = 'color:#000000;'>Claims</div></div><br/><div class='touchpoint_filterattributes' id='BODIVID_1570' style = 'background:#b7b7b7;'><div class='color_box_label' style = 'color:#000000;'>Corporate Communication</div></div><br/><div class='touchpoint_filterattributes' id='BODIVID_1260' style = 'background:#C9C9C9;'><div class='color_box_label' style = 'color:#000000;'>Claims</div></div><br/>", 
 

 
i, switching, b, shouldSwitch, divs; 
 
$('#container').append(toSort); 
 

 
    
 
    switching = true; 
 
    /*Make a loop that will continue until 
 
    no switching has been done:*/ 
 
    while (switching) { 
 
    //start by saying: no switching is done: 
 
    switching = false; 
 
    //Loop through all divs items: 
 
    divs = $('.touchpoint_filterattributes'); 
 
    for (i = 0; i < (divs.length - 1); i++) { 
 
     //start by saying there should be no switching: 
 
     shouldSwitch = false; 
 
     /*check if the next item should 
 
     switch place with the current item:*/ 
 
     if ($(divs[i]).find('.color_box_label').text().toLowerCase() > $(divs[i+1]).find('.color_box_label').text().toLowerCase()) { 
 
     /*if next item is alphabetically lower than current item, 
 
     mark as a switch and break the loop:*/ 
 
     shouldSwitch= true; 
 
     break; 
 
     } 
 
    } 
 
    if (shouldSwitch) { 
 
     /*If a switch has been marked, make the switch 
 
     and mark the switch as done:*/ 
 
     divs[i].parentNode.insertBefore(divs[i + 1], divs[i]); 
 
     switching = true; 
 
    } 
 
    } 
 
    $('#container').append(divs); 
 

 
}); \t

.touchpoint_filterattributes{margin:20px 0px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='container'></div>