Question

我想选择两个元素，当我点击按钮元素时我希望它们交换位置，我该怎么做？我搜索并寻找类似的答案，但大多数只是上下交换元素。

我在想：

$('button').click(function(){
   $('#item 1 .selected-item').removeClass('.selected-item').appendTo('#item2');
   $('#item 2 .selected-item').removeClass('selected-item').appendTo('#item1');
});

但我不知道如何开始，它应该看起来像这样：

http://jsfiddle.net/tLNAh/1/（我的小提琴）

Answer 1

试试这个。 http://jsfiddle.net/tLNAh/3/

$("button").on("click", function() {
    $first = $(".selected:eq(0)");
    $second = $(".selected:eq(1)");
    var tempText = $first.text();
    $first.text($second.text());
    $second.text(tempText);
    $("#instructionText").text("Instructions: choose an item");
});

Answer 2

使用您的标记执行此操作：

$("button").on("click", function() {
    $('.selected').insertBefore($('ul:eq(1) li:first'));
});

Demo

或者你可以更新到这个：

$("button").on("click", function() {
   if($('.selected').closest('ul').index() < $('.selected').closest('ul').siblings('ul').index()){
      $('.selected').insertBefore($('ul:eq(1) li:first'));
   }else{
      $('.selected').insertBefore($('ul:eq(0) li:first'));
   }
});

Updated fiddle

Answer 3

Chk this：fiddle link

为您的ul提供ID：

<ul id="item1">
<ul id ="item2">

试试这个：

$("button").on("click", function() {
   $("#instructionText").text("Instructions: choose an item");    
   $('#item1 .selected').removeClass('selected').remove().appendTo('#item2');
   $('#item2 .selected').removeClass('selected').remove().appendTo('#item1');
});

$("body").on("click","li", function(e) {
   $(this).toggleClass("selected");        
   $("#instructionText").text("Instructions: choose the item to change place with");
});

Answer 4

你必须得到list元素的索引并使用它： http://jsfiddle.net/faceleg/FJt9X/2/

var swapElements = function(siblings, subjectIndex, objectIndex) {
    // Get subject jQuery
    var subject = $(siblings.get(subjectIndex));
    // Get object element
    var object = siblings.get(objectIndex);
    // Insert subject after object
    subject.insertAfter(object);
}
$(function() {
    swapElements($('li'), 0, 1);
});

Answer 5

试试这个：

function swapItems(first, second) {
    var sibling = first.next();
    if (sibling.length) {
        first.insertBefore(second);
        second.insertBefore(sibling);
    } else {
        sibling = first.prev();
        if (sibling.length) {
            first.insertBefore(second);
            second.insertAfter(sibling);
        } else {
            var parent = firstItem.parent();
            first.insertBefore(second);
            second.appendTo(parent);
        }
    }
}

Updated fiddle

编辑：我更新了小提琴，现在您必须单击按钮才能交换项目。

点击后交换两项

5 个答案:

Demo

Updated fiddle