根據字母重新排列列表項？

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，您需要：Fiddle： https ://jsfiddle.net/d7wug6d8/1/

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

Answer 2

基本上，這就是我不希望完成代碼的過程。 然后，您可以遍歷cropArray並將其輸出到html span元素之間。

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

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>