Move containing elements up and down with jquery

Question

Thanks for any help you can provide! Currently, I use a ui-sortable code to allow users to move items up and down in order. Now, I want to give each of these items a set of

Answer 1

You could try replacing your JS with something like this:

$(".down").click(function () {
    var $parent = $(this).parents(".leg");
    $parent.insertAfter($parent.next()); 
});

$(".up").click(function () {
    var $parent = $(this).parents(".leg");
    $parent.insertBefore($parent.prev()); 
});

http://jsfiddle.net/vexw5/7/

This is just the basics. There are no animations or anything.

Answer 2

There are several problems to address in your code so let's go through them in order.

First there is $('up-button') it is missing the . so it won't select the buttons.

Next you are using the parent() method which only goes up one level, use parents('.leg') instead.

insertBefore() is a method that accepts a target as to where to place the content you selected.

previous() isn't a function, it is prev() instead and it doesn't need a parameter as it just selects the previous element.

If you combine all of those fixes you would get something like this

$('.up-button').click(function(){
  $(this).parents('.leg').insertBefore($(this).parents('.leg').prev());
});

$('.down-button').click(function(){
  $(this).parents('.leg').insertAfter($(this).parents('.leg').next());
});

As demonstrated on this edited fiddle http://jsfiddle.net/vexw5/6/