我在下面尝试做的一个非常简单的例子。左边的链接/按钮向上移动项目,右边的链接/按钮向下移动项目。但它不起作用,我收到一个错误:
Object doesnt support this property or method
在这一行:
items[counter-1] = curr;// move
previous item, to current
示例图片:
这是我的代码:
function MoveItem(id, direction) {
var ul = document.getElementById('GroupBy');
var items = ul.getElementsByTagName('li');
var counter = 0;
var previousItem = null;
var moveNextItemUp = false;
for (var item in items) {
//if current item, is the one to be moved
if (item == id) {
if (direction == 1) { // item move down
moveNextItemUp = true;
} else if ((direction == -1) || (moveNextItemUp == true)) { // item move up
var curr = items[counter];
var prev = items[counter - 1];
items[counter - 1] = curr; // move previous item, to current
items[counter] = prev; //move current item, to previous
break;
}
}
previousItem = item;
counter = counter + 1;
}
}
<ul id="GroupBy">
<li id="One">
one<a href="#" onclick="MoveItem('One', 1)"> V </a>
</li>
<li id="Two">
<a href="#" onclick="MoveItem('Two', -1)"> ^ </a>two<a href="#" onclick="MoveItem('Two', 1)"> V </a>
</li>
<li id="Three">
<a href="#" onclick="MoveItem('Three', -1)"> ^ </a>three<a href="#" onclick="MoveItem('Three', 1)"> V </a>
</li>
<li id="Four">
<a href="#" onclick="MoveItem('Four', -1)"> ^ </a>four
</li>
</ul>
最佳答案
您正在使用 for-in
语句,这意味着您无法保证您可能期望的数字顺序。
改用 for
语句:
for (var i = 0, len = items.length; i < len; i++) {
此外,请记住 items
是一个“实时列表”,因此您在 DOM 中所做的更改会反射(reflect)在列表中,并且列表本身是不可变的,因为它不是数组.
如果要将元素向后移动一个索引,请使用 insertBefore
。
像这样:
items[i].parentNode.insertBefore( items[i],items[i-1] );
示例: http://jsfiddle.net/d25a3/
function MoveItem(id, direction) {
var ul = document.getElementById('GroupBy');
var items = ul.getElementsByTagName('li');
var counter = 0;
var previousItem = null;
var moveNextItemUp = false;
for (var i = 0, len = items.length; i < len; i++) {
var item = items[i];
if (item.id == id) {
if (direction == 1) {
moveNextItemUp = true;
} else if ((direction == -1) || (moveNextItemUp == true)) {
item.parentNode.insertBefore( item,items[i-1] );
break;
}
}
previousItem = item;
counter = counter + 1;
}
}
此外,不确定代码的完整意图是什么,但您似乎可以简化如下内容:
示例: http://jsfiddle.net/d25a3/1/
<!-- pass the parent node of the item clicked as the first argument -->
<li id="Two">
<a href="#" onclick="MoveItem(this.parentNode, -1)"> ^ </a>two<a href="#" onclick="MoveItem('Two', 1)"> V </a>
</li>
并完全摆脱循环:
function MoveItem(item, direction) {
var counter = 0;
var previousItem = null;
var moveNextItemUp = false;
if (direction == 1) {
moveNextItemUp = true;
} else if ((direction == -1) || (moveNextItemUp == true)) {
// get the previous <li> element
var prev = item.previousSibling
while( prev && prev.nodeType != 1 && (prev = prev.previousSibling));
item.parentNode.insertBefore(item, prev);
}
previousItem = item;
counter = counter + 1;
}
关于javascript - 向上或向下排序列表项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4948447/