我想在下面尝试做的一个非常简单的例子。左侧的链接/按钮可向上移动项目,右侧的链接/按钮可向下移动项目。但它没有用,我收到了一个错误:
对象不支持此属性或方法
在这一行:
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>
答案 0 :(得分:3)
您正在使用for-in
声明,这意味着您无法保证您可能期望的数字顺序。
改为使用for
语句:
for (var i = 0, len = items.length; i < len; i++) {
另外,请记住items
是一个“实时列表”,因此您在DOM中所做的更改会反映在列表中,并且列表本身是不可变的,因为它不是数组。
如果要将元素移回一个索引,请使用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;
}
答案 1 :(得分:0)
要实际移动页面上的元素,您需要将其从文档中删除,然后按所需顺序重新插入。首先离开
if (item == id) {
将无法正常工作,因为item是DOM元素,并将其与您需要执行的ID进行比较:
if(item.id == id){
现在特别针对你的问题,当counter == 0 item [counter-1]将超出数组的范围而不存在。