Question

我想重新排序，其中显示了网页的某些元素。根据{{3}}的答案，我有以下代码：

<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>

请注意，当显示的数字发生变化时，标题的顺序保持不变。

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

Answer 2

在$(grp).remove()：

之前添加此内容

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

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

2 个答案: