根据字母重新排列列表项

Question

我想知道这是否可能。我在下面有一些代码：

<p class="page_classList">
<strong>Crops:</strong>
<br>
<span class="cropElem">Berries - Blueberries</span>
<span class="cropElem">Peas</span>
<span class="cropElem">Squash</span>
<span class="cropElem">Okra</span>
</p>

有没有办法让这些跨度按字母顺序（按裁剪）显示自己。当用户单击在 wordpress 中内置的农场页面时，将显示此列表。脚本可以在页面加载时重新排列这些内容吗？

任何帮助都会很棒！

Answer 1

循环遍历并找到所有裁剪元素，删除该元素并将裁剪名称保存到列表中。对列表进行排序，然后遍历列表并将每个元素重新添加到<p>这次它们将按字母顺序排列，因为列表是按字母顺序排序的

，使用 .sort()

小提琴：https://jsfiddle.net/d7wug6d8/

var spans = $(".page_classList").find(".cropElem");
var cropNames = [];
spans.each(function(index) {
  $(spans[index]).remove();
  cropNames.push($(spans[index]).html());
});
cropNames.sort();
$(cropNames).each(function(index) {
  $(".page_classList").append('<span class="cropElem">' + cropNames[index] + '</span>n');
});

这给出了最终的 HTML：

<p class="page_classList">
  <strong>Crops:</strong>
  <br>
  <span class="cropElem">Berries - Blueberries</span>
  <span class="cropElem">Okra</span>
  <span class="cropElem">Peas</span>
  <span class="cropElem">Squash</span>
</p>

对于您要求的新 HTML：小提琴：https://jsfiddle.net/d7wug6d8/1/

var foodItems = $(".page_classList").html().split(",");
foodItems.sort();
$(".page_classList").html(foodItems.join(", "));

Answer 2

如果您已经在元素上设置了事件，您可能不希望重新创建它们，而是重新排序它们。以下是我将如何做到这一点：

var container = $('.page_classList'),
    data      = $('.cropElem');
data.sort(function(a,b){
  if($(a).html() > $(b).html()) return 1;
  if($(a).html() < $(b).html()) return -1;
  return 0;
});
for(var i=0; i<data.length; i++) {
  container.append(data[i]);
}

.cropElem{ display: block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="page_classList">
<strong>Crops:</strong>
<br>
<span class="cropElem">Berries - Blueberries</span>
<span class="cropElem">Peas</span>
<span class="cropElem">Squash</span>
<span class="cropElem">Okra</span>
</p>

为什么要使用append？

当你对一个元素进行append时，它不会复制它，而是移动它。这允许您对元素重新排序。

Answer 3

这基本上就是你会做的，不过我不想完成代码。 然后，您可以遍历 cropArray 并将其输出到 html span 元素之间。

var cropArray = ["Berries - Blueberries", "Peas", "Squash", "Okra"];
cropArray.sort();

Answer 4

或者简单地：

获取spans集合，对它们进行排序，然后重新附加新排序的集合。

var els = $('.cropElem');
els.sort(function (a, b) {
    a = $(a).text();
    b = $(b).text();
    
    // compare
    if(a > b) {
        return 1;
    } else if (a < b) {
        return -1;
    }
    return 0;
});
$('.page_classList').append(els);

span { display: block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="page_classList">
  <strong>Crops:</strong>
  <br>
  <span class="cropElem">Berries - Blueberries</span>
  <span class="cropElem">Peas</span>
  <span class="cropElem">Squash</span>
  <span class="cropElem">Okra</span>
</p>