admin管理员组文章数量:1323560
I have a list:
<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>
Each one has an up and down arrow on. In my jquery I have:
$(".upArrow").click(function() {
});
$(".downArrow").click(function() {
});
How can I get it so that when a user clicks up arrow it swaps the li with the one above, and when they click down it swaps with the li below (if one exists).
I have a list:
<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>
Each one has an up and down arrow on. In my jquery I have:
$(".upArrow").click(function() {
});
$(".downArrow").click(function() {
});
How can I get it so that when a user clicks up arrow it swaps the li with the one above, and when they click down it swaps with the li below (if one exists).
Share Improve this question edited Sep 26, 2015 at 18:17 gsamaras 73.4k50 gold badges208 silver badges326 bronze badges asked Apr 25, 2012 at 15:52 panthropanthro 24.1k70 gold badges203 silver badges349 bronze badges 03 Answers
Reset to default 6jsFiddle( http://jsfiddle/A9j3E/6/ )
$(".upArrow").click(function() {
$(this).parent().insertBefore( $(this).parent().prev() );
});
$(".downArrow").click(function() {
$(this).parent().insertAfter( $(this).parent().next() );
});
You could get a reference to the list item, and insert it before/after its sibling.
$(".upArrow").on("click", function(){
var li = $(this).closest("li");
li.insertBefore( li.prev() );
});
Also, be sure to properly close your images. Your down arrow images were all malformed.
try something like this
$(".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);
}
});
本文标签: javascriptSwapping list elements with jQueryStack Overflow
版权声明:本文标题:javascript - Swapping list elements with jQuery - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742118295a2421573.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论