在 jQuery 中交换两个元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16845446/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Swap two elements in jQuery
提问by YeppThat'sMe
I'm trying to swap two elements using up and down arrows.
我正在尝试使用向上和向下箭头交换两个元素。
A JSFiddle solution would be great!
JSFiddle 解决方案会很棒！
My HTML:
我的 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>
My last try was:
我最后一次尝试是：
// 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));
}
});
I've tried a lot of different ways to change items. I've tried with replaceWith(), before(), and after()but nothing worked.
我尝试了很多不同的方法来更改项目。我试过replaceWith(), before()，after()但没有任何效果。
NOTICE: I've already written a function which displays the correct up / down DIVs. So the first and last one can only moved in one direction. That's already solved. I also can't use any kind of existing jQuery plugins.
注意：我已经编写了一个函数来显示正确的向上/向下 DIV。所以第一个和最后一个只能朝一个方向移动。那已经解决了。我也不能使用任何现有的 jQuery 插件。
回答by ?????
You can do it like this - you need to check e.target not the div with class = move
你可以这样做 - 你需要检查 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
}
});
回答by pete
I'd probably do something like this:
我可能会做这样的事情：
$(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());
});
});
Here's a working example: http://jsfiddle.net/a6Se4/
这是一个工作示例：http: //jsfiddle.net/a6Se4/
回答by Derek
try:
尝试：
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);
}
});
回答by Stilmittel
I know it's solved already but I just wanted to leave this solution I stumbled upon while I was looking for an answer to the same question:
我知道它已经解决了，但我只想留下我在寻找同一问题的答案时偶然发现的这个解决方案：
Is there a native jQuery function to switch elements?
jQuery("#element1").before(jQuery("#element2"));
or
jQuery("#element1").after(jQuery("#element2"));
it's practically what Derek suggested though.
这实际上是德里克建议的。
