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

这基本上就是你要做的事情我不喜欢完成代码。然后你可以遍历cropArray并在html span元素之间输出它。

onLoadFinished()

Answer 3

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

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

根据字母重新排列列表项？

4 个答案: