排序元素按字母顺序重复基于子女

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>