排序元素按字母順序重複基於子女

Question

我想根據內部第二個div的段落元素按字母順序排列我內部xmen的div。這是我有：

$(document).ready(function(){ 
    $('#xmen > .g > div:nth-of-type(2) > p').sort(function(a, b) { 
    if (a.textContent < b.textContent) { 
     return -1; 
    } else { 
     return 1; 
    } 
    }).appendTo('#xmen'); 
}); 

與

<div id="xmen"> 
    <div class='g'> 
    <div><p>marvel vs capcom</p></div> 
    <div><p>CCC</p></div> 
    </div> 
    <div class='g'> 
    <div><p>matrix</p></div> 
    <div><p>Neo</p></div> 
    </div> 
    <div class='g'> 
    <div><p>Neo Geo</p></div> 
    <div><p>Neo</p></div> 
    </div> 
    <div class='g'> 
    <div><p>Neo Geo</p></div> 
    <div><p>Neo</p></div> 
    </div> 
    <div class='g'> 
    <div><p>Neo Geo</p></div> 
    <div><p>Neo</p></div> 
    </div> 
    <div class='g'> 
    <div><p>Neo Geo</p></div> 
    <div><p>Neo</p></div> 
    </div> 
    <div class='g'> 
    <div><p>Neo Geo</p></div> 
    <div><p>Neo</p></div> 
    </div> 
    <div class='g'> 
    <div><p>Matrix</p></div> 
    <div><p>Smith</p></div> 
    </div> 
    <div class='g'> 
    <div><p>JSON</p></div> 
    <div><p>Neo</p></div> 
    </div> 
</div> 

的HTML，但因爲它似乎是考慮它的div的，它拍攝到的底部，我不會做正確最後一個div，而不是按字母順序組織每個g class div。可能是什麼問題？我似乎也有重複被排序的問題。

Answer 1

基本上是一回事加里小號公佈，但jQuery選擇找孩子p元素：

$('#xmen > .g').sort(function(ga, gb) { 
    var a = $(ga).find('div:nth-of-type(2) > p'); 
    var b = $(gb).find('div:nth-of-type(2) > p'); 
    if (a.text() < b.text()) { 
     return -1; 
    } else { 
     return 1; 
    } 
    }).appendTo('#xmen'); 

這裏是一個fiddle

Answer 2

未排序的子項已經存在於#xmen中，並且將排序的子項再次添加到它。你必須以某種方式刪除舊的，並添加排序的：

$(document).ready(function(){ 
     var temp = $('<div/>'); 
     $('#xmen > .g > div:nth-of-type(2) > p').sort(function(a, b) { 
     if (a.textContent < b.textContent) { 
      return -1; 
     } else { 
      return 1; 
     } 
     }).appendTo(temp); 
    $('#xmen').html(temp.html()); 

}); 

而且也是在你的代碼，你應該改變.appendTo('#xmen');到.appendTo($('#xmen'));

見DEMO

Answer 3

我相信這會做你是什麼要求：

$(function() { 
 

 
    // First get the entire 'x-men' div 
 
    var movieContainer = $('#xmen'); 
 

 
    // Store all "g" divs 
 
    var movieDivs =movieContainer.find('.g'); 
 

 
    // Then sort them based on the text content of the last element 
 
    movieDivs.sort(function(a, b) { 
 

 
     var result = a.lastChild.previousSibling.textContent < b.lastChild.previousSibling.textContent; 
 

 
    \t if (result === true) { 
 
      return -1; 
 
     } else { 
 
      return 1; 
 
     } 
 
    }); 
 
    // Finally, overwrite the previous HTML of the 'x-men' div 
 
    // with the new sorted content (I also changed the text color 
 
    // to make it easier to differentiate) 
 
    movieDivs.find('p:last').css('color', 'orange'); 
 
    movieContainer.html(movieDivs); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="xmen"> 
 
    <div class='g'> 
 
    <div><p>marvel vs capcom</p></div> 
 
    <div><p>CCC</p></div> 
 
    </div> 
 
    <div class='g'> 
 
    <div><p>matrix</p></div> 
 
    <div><p>Neo</p></div> 
 
    </div> 
 
    <div class='g'> 
 
    <div><p>matrix</p></div> 
 
    <div><p>Morpheus</p></div> 
 
    </div> 
 
    <div class='g'> 
 
    <div><p>matrix</p></div> 
 
    <div><p>Trinity</p></div> 
 
    </div> 
 
    <div class='g'> 
 
    <div><p>Neo Geo</p></div> 
 
    <div><p>Neo</p></div> 
 
    </div> 
 
    <div class='g'> 
 
    <div><p>X Men</p></div> 
 
    <div><p>Apocalypse</p></div> 
 
    </div> 
 
    <div class='g'> 
 
    <div><p>Neo Geo</p></div> 
 
    <div><p>Neo</p></div> 
 
    </div> 
 
    <div class='g'> 
 
    <div><p>Matrix</p></div> 
 
    <div><p>Smith</p></div> 
 
    </div> 
 
    <div class='g'> 
 
    <div><p>JSON</p></div> 
 
    <div><p>Neo</p></div> 
 
    </div> 
 
</div>