按字母顺序排序嵌套的div。

Question

我有以下

布局：

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

我希望能按照子 title div 的内容对 entry 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演示。

我如何按字母顺序对div进行排序而不剥离任何内容？

- Henrik Petterson

---

我们需要看到更多这样的“我尝试过的方法”部分。+1 - Gary Woods

Answer 1

你的逻辑是正确的，但问题在于你正在对 .title 元素进行排序。相反，你需要对 .entry 元素进行排序，然后找到当前 .entry 中的 .title，并对它们的文本值进行比较。尝试这样做：

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>

- Rory McCrossan

Answer 2

我该如何按字母顺序对div进行排序而不会剥离任何内容？

通过对“正确”的元素进行排序？

如果您已经声明要对实际需要排序的.entry元素进行排序，为什么要对.title进行排序？

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/

- CBroe

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());
    });

- Greaka

Answer 4

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

所以只需要做一个微小的更改：

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

查看更新后的fiddle

- Shtut

---

当标题元素不是第一个子元素时，这段代码无法正常工作。 - Greaka