Question

我试图根据内部的第二个div段落元素按字母顺序对我的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');
});

使用

的html

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

但是我没有正确地做到这一点，因为它似乎是将它从div中取出并将其射到最后一个div的底部而不是按字母顺序组织每个g class div。可能是什么问题？我似乎也有重复排序的问题。

Answer 1

我相信这会满足你的要求：

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

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

基本上和Gary S发布的一样，但是使用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

按字母顺序排列元素，基于子项重复

3 个答案: