使用JavaScript重新排序li元素

我有一個按照字母順序顯示位置的li，我想抓住列表中的元素並以不同的順序返回。使用JavaScript重新排序li元素

<li class="single-contact-location"> 
     <span>Location</span> 
    ALocation, BLocation, CLocation, DLocation, ELocation, FLocation 
    </li>

假設BLocation，ALocation，CLocation，DLocation，ELocation，FLocation

隨着

變種LI = document.getElementsByClassName（「單接觸位置」）[0] ;

我得到李類和跨度的位置，但跨度混淆了我，因爲我無法抓住和重新排序元素。

來源

2015-06-18 jimakos17

你可以在一個空間分割字符串和再定購它作爲數組？ – g3mini

您可以通過下面的代碼讀取的位置列表：

/* querySelector: IE8+ support */ 
 
var span = document.querySelector(".single-contact-location > span"); 
 

 
/* get the next node after the span */ 
 
var textNodeAfterSpan = span.nextSibling; 
 

 
/* Get the content of the text node and split it */ 
 
var locationList = textNodeAfterSpan.nodeValue.split(', '); 
 

 
/* Reorder it */ 
 
var mainLocation = locationList[1]; 
 
locationList[1] = locationList[0]; 
 
locationList[0] = mainLocation; 
 

 
/* Rewrite it */ 
 
textNodeAfterSpan.nodeValue = ' ' + locationList.join(', ');

<li class="single-contact-location"> 
 
    <span>Location</span> 
 
    ALocation, BLocation, CLocation, DLocation, ELocation, FLocation 
 
</li>

來源

2015-06-18 13:21:16 tzi

謝謝tzi您的回覆，但我如何才能首先顯示BLocation並確定ALocation？這真的是很好的答案，但隨機重新排序。 – jimakos17

你只想在第一個地方有第二個？ – tzi

是的，或者第一位的第三位。 – jimakos17

您可以使用childNode屬性來抓取這些字段並進行相應的修改。這裏是一個小提琴http://jsfiddle.net/sdvowy38/1/

var li = document.getElementsByClassName("single-contact-location"); 
var arr=li[0].childNodes[2].textContent.trim().split(',');

來源

2015-06-18 12:59:00 prem89

使用JavaScript重新排序li元素

回答

相關問題