javascript - 如何移动数组中的一组项目？

Question

我有一张学生表，按房间排序。每个房间里都有学生，分成不同的小组。

我想通过单击“向上”或“向下”来更改房间内组的位置。我在下面进行了尝试，但它似乎很脏并且不起作用。这是jsFiddle : http://jsfiddle.net/vHhxV/

我想要一个简短、干净且简单的解决方案。

学生表:

# Before moving "Group 2" down

Id | Name      | Age | Room | Group | Actions
-----------------------------------------------
5  | Student 5 | 23  | 3    | 2     | UP | DOWN
6  | Student 6 | 27  | 3    | 2     | UP | DOWN // <- *Click*
1  | Student 1 | 29  | 5    | 1     | UP | DOWN
2  | Student 2 | 22  | 5    | 1     | UP | DOWN
3  | Student 3 | 21  | 5    | 3     | UP | DOWN
4  | Student 4 | 25  | 5    | 3     | UP | DOWN

# After moving "Group 2" down

Id | Name      | Age | Room | Group | Actions
-----------------------------------------------
1  | Student 1 | 29  | 5    | 1     | UP | DOWN
2  | Student 2 | 22  | 5    | 1     | UP | DOWN
5  | Student 5 | 23  | 3    | 2     | UP | DOWN // <- ID 5 and ID 6 moved down,
6  | Student 6 | 27  | 3    | 2     | UP | DOWN //    because both are in Group 2.
3  | Student 3 | 21  | 5    | 3     | UP | DOWN
4  | Student 4 | 25  | 5    | 3     | UP | DOWN

我的尝试(与:http://jsfiddle.net/vHhxV/相同)

<script language="text/javascript">
    $(document).ready(function() {
        /* Build the HTML */
        function build() {
            var students = new Array();
            students.push({ id: 1, name: "Student 1", room_id: 5, age: 29, group: 1 });
            students.push({ id: 2, name: "Student 2", room_id: 5, age: 22, group: 1 });
            students.push({ id: 3, name: "Student 3", room_id: 5, age: 21, group: 3 });
            students.push({ id: 4, name: "Student 4", room_id: 5, age: 25, group: 3 });
            students.push({ id: 5, name: "Student 5", room_id: 3, age: 23, group: 2 });
            students.push({ id: 6, name: "Student 6", room_id: 3, age: 27, group: 2 });

            /* Sort students by room_id */
            students.sort(function(a, b) {
                return ((a.room_id < b.room_id) ? -1 : ((a.room_id > b.room_id) ? 1     : 0));
            });

            var html = '<table>';
            html += '<tr><th>Id</th><th>Name</th><th>Age</th><th>Room</th><th>Group</th><th>Actions</th></tr>';

            for (var i = 0; i < students.length; i++) {
                html += '<tr>';
                html +=     '<td>'+ students[i].id +'</td>';
                html +=     '<td>'+ students[i].name +'</td>';
                html +=     '<td>'+ students[i].age +'</td>';
                html +=     '<td>'+ students[i].room_id +'</td>';
                html +=     '<td>'+ students[i].group +'</td>';
                html +=     '<td><a href="#" class="move_up" rel="' +
                             students[i].group +
                             '">UP</a> | <a href="#" class="move_down" rel="' +
                             students[i].group +
                             '">DOWN</a></td>';
                html += '</tr>';
            }
            html += '</table>';

            $("#students").html(html);
        }

        /* Move group up */
        $(".move_up").live("click", function() {
            var group = $(this).attr("rel");
            alert("move up: " + group);

            /**
                What to do here?

                    Idea:
                        1. Build an array of the group items (to move up)
                        2. Build an array of the parent group items (to move down)
                        3. Re-build the students array, like:

                        var group = new Array();
                        // Collect all students of the group that has to move up

                        var parent_group = new Array();
                        // Collect all students of the parent group that has to
                        // move down or be switched with the selected group.

                        var students_tmp = new Array(); // New students array
                        var ids          = new Array(); // Existing ids
                        for (var i = 0; i < students.length; i++) {
                            if (students[i].group == group) {
                                // Do nothing, because students of this group
                                // will be added below.
                            } else if (students[i].group == parent_group) {
                                // Add group before parent group
                                for (var k = 0; k < group.length;     k++) {
                                    // Add, if not exists
                                    if (jQuery.inArray(group[k].id, ids) == -1) {
                                        students_tmp.push(group[k]); // Add student
                                        ids.push(group[k].id); // Add students id
                                    }
                                }

                                // Add parent group after group
                                for (var k = 0; k < parent_group.length; k++) {
                                    // Add, if not exists
                                    if (jQuery.inArray(parent_group[k].id, ids) == -1) {
                                        students_tmp.push(parent_group[k]); // Add student
                                        ids.push(parent_group[k].id); // Add students id
                                    }
                                }
                            } else {
                                // Add student if not in group or parent group
                                if (jQuery.inArray(students[i].id, ids) == -1) {
                                        students_tmp.push(students[i]);
                                    ids.push(students[i].id);
                                }
                            }
                        }
                        students = students_tmp;
                        build();
            */
        });

        /* Move group down */
        $(".move_down").live("click", function() {
            var group = $(this).attr("rel");
            alert("move down: " + group);

            /**
                What to do here?

                Idea:
                - Same as above (move_up), just reversed
            */
        });

        build();
    });
</script>

<div id="students">...</div>

Answer 1

我认为最好在数组中添加一个排序索引来说明元素的顺序，而不是重新排列数组元素本身。