Javascript 使用jQuery交换列表元素
我有一份清单:Javascript 使用jQuery交换列表元素,javascript,jquery,Javascript,Jquery,我有一份清单: <li>item one<img src="/assets/img/site/up_arrow.png" class="upArrow"/><img src="/assets/img/site/down_arrow.png" class="downArrow"/</li> <li>item two<img src="/assets/img/site/up_arrow.png" class="upArrow"/>&l
<li>item one<img src="/assets/img/site/up_arrow.png" class="upArrow"/><img src="/assets/img/site/down_arrow.png" class="downArrow"/</li>
<li>item two<img src="/assets/img/site/up_arrow.png" class="upArrow"/><img src="/assets/img/site/down_arrow.png" class="downArrow"/</li>
<li>item three<img src="/assets/img/site/up_arrow.png" class="upArrow"/><img src="/assets/img/site/down_arrow.png" class="downArrow"/</li>
<li>item four<img src="/assets/img/site/up_arrow.png" class="upArrow"/><img src="/assets/img/site/down_arrow.png" class="downArrow"/</li>
<li>item five<img src="/assets/img/site/up_arrow.png" class="upArrow"/><img src="/assets/img/site/down_arrow.png" class="downArrow"/</li>
如何获取它,以便当用户单击向上箭头时,它将li与上面的li交换,当用户单击向下箭头时,它将与下面的li交换(如果存在)。您可以获取列表项的引用,并将其插入到其同级项之前/之后
$(".upArrow").on("click", function(){
var li = $(this).closest("li");
li.insertBefore( li.prev() );
});
此外,请确保正确关闭图像。你的向下箭头图像格式都不正确。试试这样的方法
$(".upArrow").click(function() {
var thisItem = $(this).closest('li');
var prevItem = thisItem.prev();
if(prevItem.length != 0) {
thisItem.before(prevItem);
}
});
$(".downArrow").click(function() {
var thisItem = $(this).closest('li');
var nextItem = thisItem.next();
if(nextItem.length != 0) {
thisItem.after(nextItem);
}
});
jsFiddle()
这只适用于相邻的孩子,对吗?我的意思是,如果你想先和第四个孩子交换,我想这是行不通的。
$(".upArrow").click(function() {
var thisItem = $(this).closest('li');
var prevItem = thisItem.prev();
if(prevItem.length != 0) {
thisItem.before(prevItem);
}
});
$(".downArrow").click(function() {
var thisItem = $(this).closest('li');
var nextItem = thisItem.next();
if(nextItem.length != 0) {
thisItem.after(nextItem);
}
});
$(".upArrow").click(function() {
$(this).parent().insertBefore( $(this).parent().prev() );
});
$(".downArrow").click(function() {
$(this).parent().insertAfter( $(this).parent().next() );
});