jQuery通过点击链接来安排li命令 [英] jQuery arrange li order by clicking on a link

问题描述

 < div> 
< ul> 
< li> Item1< a class =moveUp>上移< / a> < a class =moveDown>向下移动< / a>< / li> 
< li> Item2< a class =moveUp>上移< / a> < a class =moveDown>向下移动< / a>< / li> 
< li> Item3< a class =moveUp>上移< / a> < a class =moveDown>向下移动< / a>< / li> 
< li>项目4< a class =moveUp>上移< / a> < a class =moveDown>向下移动< / a>< / li> 
< li> Item5< a class =moveUp>上移< / a> < a class =moveDown>向下移动< / a>< / li> 
< / ul> 
< / div> 
  

所以在这里会发生什么，例如，如果我们点击Item2上的Move up，Item 2会

我试过这样做，但它不起作用：

<$ p （）。
var thisLine = $（this）.parent（）;
var prevLine = thisLine.prev（） ）;
prevLine.insertAfter（thisLine）;
}）;

希望有人能帮助我...

解决方案

这可以起作用，并且当您尝试将其移动到顶部或底部时，也不会移动UL以外的元素：

  $（'。moveUp'）。click（function（）{
 var liItem = $（this）.parent（）; $ b $ （liItem.prev（）。is（'li'））
 {
 liItem.insertBefore（liItem.prev（））
} 
}）; （）。
 $ b $（'。moveDown'）。click（function（）{
 var liItem = $（this）.parent（）; 
 if（liItem.next（）。 （'li'））
 {
 liItem.insertAfter（liItem.next（））
} 
}）; 
  

工作示例： http://jsfiddle.net/BDecp/

另外，你的代码应该用这个包装：

  $（document）.ready（function（）{
 // Code Here 
}）; 
  

Need to change li position by clicking to move up or to move down.

<div>
  <ul>
    <li>Item1  <a class="moveUp">Move Up</a> <a class="moveDown">Move Down</a></li>
    <li>Item2  <a class="moveUp">Move Up</a> <a class="moveDown">Move Down</a></li>
    <li>Item3  <a class="moveUp">Move Up</a> <a class="moveDown">Move Down</a></li>
    <li>Item4  <a class="moveUp">Move Up</a> <a class="moveDown">Move Down</a></li>
    <li>Item5  <a class="moveUp">Move Up</a> <a class="moveDown">Move Down</a></li>
  </ul>
</div>

So what should happen here, for example, if we click Move up on Item2, the Item 2 will move up before Item 1.

I tryed to do like this, but it doesn't work:

$(".moveUp").click(function () {
    var thisLine = $(this).parent();
    var prevLine = thisLine.prev();
    prevLine.insertAfter(thisLine);
});

Hope some one can help me...

解决方案

This should work and will also not move the element outside of the UL when you try and move it up at the top or down at the bottom:

$('.moveUp').click(function(){
    var liItem = $(this).parent();
    if (liItem.prev().is('li'))
    {
        liItem.insertBefore(liItem.prev())
    }
});

$('.moveDown').click(function(){
    var liItem = $(this).parent();
    if (liItem.next().is('li'))
    {
        liItem.insertAfter(liItem.next())
    }
});

Working Example: http://jsfiddle.net/BDecp/

Also, your code should be wrapped with this:

$(document).ready(function () {
    //Code Here
});

这篇关于jQuery通过点击链接来安排li命令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！