我正在尝试使用向上和向下箭头交换两个元素。
如果有JSFiddle的解决方案就太好了!
我的HTML代码:
<div class="item">
<div class="content">Some text</div>
<div class="move">
<div class="move-down">down</div>
</div>
</div>
<div class="item">
<div class="content">Some other text</div>
<div class="move">
<div class="move-up">up</div>
<div class="move-down">down</div>
</div>
</div>
<div class="item">
<div class="content">Some text</div>
<div class="move">
<div class="move-up">up</div>
<div class="move-down">down</div>
</div>
</div>
<div class="item">
<div class="content">Some other text</div>
<div class="move">
<div class="move-up">up</div>
</div>
</div>
我上一次尝试是:
// el is the clicked one.
jQuery('.move').children().click(function(el) {
if (jQuery(el).hasClass('move-down') === true) {
el = jQuery(el).parent().parent();
el.prependTo(el.after(el));
} else {
el = jQuery(el).parent().parent();
el.appendTo(el.before(el));
}
});
我尝试了很多不同的方法来更改项目。我试过使用replaceWith()
,before()
和after()
,但都没有成功。
注意: 我已经编写了一个显示正确上/下DIV的函数。所以第一个和最后一个只能朝一个方向移动。这个问题已经解决了。我也不能使用任何现有的jQuery插件。
el
不是被点击的元素,而是事件。this
是被点击的元素。 - Barmar