jquery两个div互换_交换jQuery中的两个元素

I'm trying to swap two elements using up and down arrows.

A JSFiddle solution would be great!

My HTML:

Some text

down

Some other text

up

down

Some text

up

down

Some other text

up

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.

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.

解决方案

You can do it like this - you need to check e.target not the div with class = move

jQuery('.move').children().click(function (e) { //

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

}

});