Question

我有以下div布局：

<div class="container">
    <div class="entry">
        <div class="title">World</div>
        <div class="description">text1</div>
    </div>

    <div class="entry">
        <div class="title">hello</div>
        <div class="description">text2</div>
    </div>

    <div class="entry">
        <div class="title">Lorem</div>
        <div class="description">text3</div>
    </div>
</div>

我想按照子entry div的内容按字母顺序对title div进行排序。

到目前为止我尝试了什么

这将按字母顺序排序：

var alphabeticallyOrderedDivs = $('.title').sort(function(a, b) {
            return String.prototype.localeCompare.call($(a).text().toLowerCase(), $(b).text().toLowerCase());
        });

var container = $(".container");
container.detach().empty().append(alphabeticallyOrderedDivs);
$('body').append(container);

但它会删除description div。试试jsFiddle demo。

如何在不剥离任何内容的情况下按字母顺序对div进行排序？

Answer 1

您的逻辑是正确的，但问题是您正在对.title元素进行排序。相反，您需要对.entry元素进行排序，然后在当前.title中找到.entry并对其文本值执行比较。试试这个：

var alphabeticallyOrderedDivs = $('.entry').sort(function(a, b) {
  var $aTitle = $(a).find('.title'), $bTitle = $(b).find('.title');
  return String.prototype.localeCompare.call($aTitle.text().toLowerCase(), $bTitle.text().toLowerCase());
});

var container = $(".container");
container.detach().empty().append(alphabeticallyOrderedDivs);
$('body').append(container);

.entry {
  border: 1px solid #CCC;
  padding: 5px;
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="container">
  <div class="entry">
    <div class="title">World</div>
    <div class="description">text1</div>
  </div>

  <div class="entry">
    <div class="title">hello</div>
    <div class="description">text2</div>
  </div>

  <div class="entry">
    <div class="title">Lorem</div>
    <div class="description">text3</div>
  </div>
</div>

Answer 2

如何在不剥离任何内容的情况下按字母顺序对div进行排序？

通过对右元素进行排序？

为什么要对.title进行排序，如果您说明.entry元素是您实际想要排序的内容？

var alphabeticallyOrderedDivs = $('.entry').sort(function(a, b) {
            return String.prototype.localeCompare.call(
              $(a).find('.title').text().toLowerCase(), 
              $(b).find('.title').text().toLowerCase());
            });

http://jsfiddle.net/yapu9a6m/1/

Answer 3

排序时，您必须随身携带父元素。然后你去搜索你想要排序的子元素：

var alphabeticallyOrderedDivs = $('.entry').sort(function(a, b) {
        return String.prototype.localeCompare.call($(a).find("div.title").text().toLowerCase(), $(b).find("div.title").text().toLowerCase());
    });

Answer 4

您正在对标题进行排序，您应该对条目进行排序。

这么微小的变化：

var alphabeticallyOrderedDivs = $('.entry').sort(function(a, b) {
        return String.prototype.localeCompare.call($(a).text().toLowerCase(), $(b).text().toLowerCase());
    });

See updated fiddle

按字母顺序对嵌套div进行排序

到目前为止我尝试了什么

4 个答案: