重新排序HTML元素并更改内容

  • Z时代
  • 2024-01-10
  • 分类：问答

我想重新排列显示网页的某些元素。继答案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>

注意，标题的顺序保持，而显示的数字变化相同。

回答：

$(grp).remove()前补充一点：

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

回答：

在你已经对它们进行了随机化处理后，循环使用grp，重置属性title至'Row '+i，其中i = index in array + 1。
你可以，如果你做

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

这导致调用.setAttribute很多倍，但需要一个都不能少循环中随机一步做到这一点。

以上是 重新排序HTML元素并更改内容 的全部内容， 来源链接： utcz.com/qa/257872.html

回到顶部