重新排序HTML元素並更改內容

我想重新排列顯示網頁的某些元素。繼答案this question，我有以下代碼：重新排序HTML元素並更改內容

<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 

     <script> 
     function reorder() { 
      var grp = $(".myItems").children(); 
      var cnt = grp.length; 

      var temp,x; 
      for (var i = 0; i < cnt; i++) { 
       temp = grp[i]; 
       x = Math.floor(Math.random() * cnt); 
       grp[i] = grp[x]; 
       grp[x] = temp; 
      } 
      $(grp).remove(); 
      $(".myItems").append($(grp)); 
     } 
     </script> 
    </head> 

    <body onload="reorder();"> 
    <div class="myItems"> 
    <div class="item" title="Row 1">1</div> 
    <div class="item" title="Row 2">2</div> 
    <div class="item" title="Row 3">3</div> 
    </div> 
    </body> 
</html>

我的問題是，我還需要修改根據它們出現的順序在<div>標籤的內容。在這個例子中，我需要title標籤中的行標識符進行更改。

例如，刷新後，可能的結果將是：

<div class="myItems"> 
    <div class="item" title="Row 1">2</div> 
    <div class="item" title="Row 2">1</div> 
    <div class="item" title="Row 3">3</div> 
    </div>

或

<div class="myItems"> 
    <div class="item" title="Row 1">3</div> 
    <div class="item" title="Row 2">2</div> 
    <div class="item" title="Row 3">1</div> 
    </div>

注意，標題的順序保持，而顯示的數字變化相同。

來源

2012-09-11 itzy

問題出在哪裏？它工作正常。 – Codegiant

把你的代碼放到js小提琴上，然後檢查。標題的順序與顯示的值相同。 – Codegiant

$(grp).remove()前補充一點：

for(var i = 0; i < cnt; i ++) { 
    grp[i].title = "Row " + (i + 1); 
}

來源

2012-09-11 14:05:41 Chris

在你已經對它們進行了隨機化處理後，循環使用grp，重置屬性title至'Row '+i，其中i = index in array + 1。
你可以，如果你做

grp[i].setAttribute('title','Row '+(i+1)); 
grp[x].setAttribute('title','Row '+(x+1));

這導致調用.setAttribute很多倍，但需要一個都不能少循環中隨機一步做到這一點。

來源

2012-09-11 14:04:03

重新排序HTML元素並更改內容

回答

相關問題