在jQuery中交换两个元素
嘿家伙我正在尝试使用向上和向下箭头交换两个元素。
一个JSFiddle解决方案会很棒！ 🙂
HTML标记就像：
Some text down Some other text up down Some text up down Some other text up 我的最后一次尝试是：
// 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（），但没有任何效果。
注意：我已经编写了一个显示正确上/下div的function。 所以第一个和最后一个只能向一个方向移动。 那已经解决了。 我也不能使用任何现有的jquery插件。
你可以这样做 – 你需要检查e.target而不是class = move的div
jQuery('.move').children().click(function (e) { // <-- argument passed in is the event not an element var $div = $(this).closest('.item'); // get closest item div if (jQuery(e.target).is('.move-down')) { // check if clicked is movedown $div.next('.item').after($div); // if it is move after next } else { $div.prev('.item').before($div);// else move it before previous } });
小提琴
我可能会这样做：
$(document).ready(function () { $('.move-down').click(function (e) { var self = $(this), item = self.parents('div.item'), swapWith = item.next(); item.before(swapWith.detach()); }); $('.move-up').click(function (e) { var self = $(this), item = self.parents('div.item'), swapWith = item.prev(); item.after(swapWith.detach()); }); });
这是一个有效的例子： http ： //jsfiddle.net/a6Se4/
我知道它已经解决但我只是想在我寻找同一问题的答案时偶然发现这个解决方案：
是否有一个原生的jQuery函数来切换元素？
jQuery("#element1").before(jQuery("#element2")); or jQuery("#element1").after(jQuery("#element2"));
这几乎是德里克所建议的。
尝试：
jQuery('.move > div').on('click', function(event) { var item = jQuery(this).closest('div.item'); if(jQuery(this).hasClass('move-down')) { item.prev('div.item').before(item); } else { item.next('div.item').after(item); } });