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

Reorder elements of HTML and change content

本文关键字：顺序 元素 新排列 排列 HTML      更新时间：2023-09-26

我想重新排序网页中某些元素的显示位置。根据这个问题的答案，我有以下代码：

<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，但需要少一个循环。

相关文章：