[英]How to move a group of items within an array?
我有一張學生桌，按房間排序。 每個房間都有學生，分為幾組。
我想通過單擊“上”或“下”來更改房間內某個組的位置。 我在下面進行了嘗試，但是它似乎很臟且無法正常工作。 這是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>
我認為最好在數組中添加一個順序索引來說明元素的順序，而不是重新排列數組元素本身。
這將滿足您定義的要求。 它不考慮房間（這是另一個問題），並且僅在您指定的組中向上或向下移動行，如果上方或下方有行會影響位置。
注意：我對您的標記等采取了一些自由，以使我的工作更輕松，添加了類等和代碼-破壞了該數組推送內容，使其僅使用數組常量。
此解決方案突出顯示了一些CSS可以移動/考慮的行，如果不希望，請刪除該CSS :)
測試小提琴： http : //jsfiddle.net/YpcBt/
標記：
<div id="students">Students Table
<table>
<tr>
<th>Id</th>
<th>Name</th>
<th>Age</th>
<th>Room</th>
<th>Group</th>
<th>Actions</th>
</tr>
</table>
</div>
CSS：
.rowme {
background-color:pink;
}
.movers {
background-color:lime;
}
碼：
var students = [{
id: 1,
name: "Student 1",
room_id: 5,
age: 29,
classgroup: 1
}, {
id: 2,
name: "Student 2",
room_id: 5,
age: 22,
classgroup: 1
}, {
id: 3,
name: "Student 3",
room_id: 5,
age: 21,
classgroup: 3
}, {
id: 4,
name: "Student 4",
room_id: 5,
age: 25,
classgroup: 3
}, {
id: 5,
name: "Student 5",
room_id: 3,
age: 23,
classgroup: 2
}, {
id: 6,
name: "Student 6",
room_id: 3,
age: 27,
classgroup: 2
}];
function addRows() {
$("#students").find('table tr.student').each(function (i) {
var cgroup = students[i] ? students[i].classgroup : i + ":notfound";
$(this).data('cgroup', cgroup);
});
}
/* build the HTML */
function build() {
/* 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 ahtml = '';
var i = 0;
for (i = 0; i < students.length; i++) {
ahtml += '<tr class="student">';
ahtml += '<td>' + students[i].id + '</td>';
ahtml += '<td>' + students[i].name + ":" + i + '</td>';
ahtml += '<td>' + students[i].age + '</td>';
ahtml += '<td>' + students[i].room_id + '</td>';
ahtml += '<td>' + students[i].classgroup + '</td>';
ahtml += '<td><a href="#" class="move_up" rel="' + students[i].classgroup + '">UP</a> | <a href="#" class="move_down" rel="' + students[i].classgroup + '">DOWN</a></td>';
ahtml += '</tr>';
}
//html += '</table>';
$("#students").find('table').append(ahtml);
addRows();
};
$(document).ready(function () {
build();
/* move group up */
$('#students').on('click', '.move_up', function () {
$('.rowme, .movers').removeClass('rowme movers');
var row = $(this).parents('tr.student');
var mygroup = row.data("cgroup");
$('#students').find('table tr.student').filter(function () {
return $(this).data('cgroup') == mygroup;
}).addClass('movers').first().prev('.student').addClass('rowme');
var moveGroup = $('.rowme').data('cgroup');
$('#students').find('table tr.student').filter(function () {
return $(this).data('cgroup') == moveGroup;
}).addClass('rowme');
$('.movers').insertBefore($('.rowme:first'));
});
/* move group down */
$('#students').on('click', ".move_down", function () {
$('.rowme, .movers').removeClass('rowme movers');
var row = $(this).parents('tr.student');
var mygroup = row.data("cgroup");
$('#students').find('table tr.student').filter(function () {
return $(this).data('cgroup') == mygroup;
}).addClass('movers').last().next('.student').addClass('rowme');
var moveGroup = $('.rowme').data('cgroup');
$('#students').find('table tr.student').filter(function () {
return $(this).data('cgroup') == moveGroup;
}).addClass('rowme');
$('.movers').insertAfter($('.rowme:last'));
});
});
完全按照您的要求，一個用於移動組的新工作提琴是http://jsfiddle.net/acturbo/8nZUx/5/ :)
jQuery的 ：
$(document).ready(function() {
/* Build the HTML */
function build() {
var students = new Array();
students.push({ order: 1, id: 1, name: "Student 1", room_id: 5, age: 29, group: 1 });
students.push({ order: 2, id: 2, name: "Student 2", room_id: 5, age: 22, group: 1 });
students.push({ order: 3, id: 3, name: "Student 3", room_id: 5, age: 21, group: 3 });
students.push({ order: 4, id: 4, name: "Student 4", room_id: 5, age: 25, group: 3 });
students.push({ order: 5, id: 5, name: "Student 5", room_id: 3, age: 23, group: 2 });
students.push({ order: 6, id: 6, name: "Student 6", room_id: 3, age: 27, group: 2 });
students.push({ order: 7, id: 7, name: "Student 7", room_id: 5, age: 44, group: 3 });
/* 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 class="'+ students[i].group +'">'; // Assign the groupid to the row as a class for easier managment.
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 class="order-col" data-order="' +
students[i].order +
'"><a href="#" class="move_up">UP</a> | <a href="#" class="move_down">DOWN</a></td>';
html += '</tr>';
}
html += '</table>';
$("#students").html(html);
}
/* Move group up */
$(".move_up").live("click", function() {
var currentRow = $(this).parent().parent();
var currentGroupClass = $(currentRow).attr("class");
var prevRow = $(currentRow).prev();
var prevGroupClass = $(prevRow).attr("class");
if (prevGroupClass == undefined){
return;
}
// Find previous group
while (prevGroupClass == currentGroupClass){
prevRow = $(prevRow).prev();
prevGroupClass = $(prevRow).attr("class");
}
// Move the group
$("."+currentGroupClass).insertBefore( $("."+prevGroupClass).first() );
});
/* Move group down */
$(".move_down").live("click", function() {
var currentRow = $(this).parent().parent();
var currentGroupClass = $(currentRow).attr("class");
var nextRow = $(currentRow).next();
var nextGroupClass = $(nextRow).attr("class");
if (nextGroupClass == undefined){
return;
}
// Find next group
while (nextGroupClass == currentGroupClass){
nextRow = $(nextRow).next();
nextGroupClass = $(nextRow).attr("class");
}
// Move the group
$("."+currentGroupClass).insertAfter( $("."+nextGroupClass).last() );
});
console.clear();
build();
});
如何將數組中的這些項目移動到數組中的對象中？
[英]How would I move these items inside an array into objects within an array?
如何將 object 中的特定項目分組到同一陣列中並將它們從核心陣列中刪除？
[英]How can I group specific items within an object in the same array and delete them from the core array?
循環遍歷 Object 並在數組中對數組中的每 4 個項目進行分組
[英]Loop over an Object and group every 4 items in an array within an array
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.