使用jQuery / JS向上/向下切换DIV元素

Question

I'm trying to move div elements of a dynamic form up or down:

Here is my form:

  <form name="f_form">
        Order name <input type="text" name="ord" id="order" />

        <div id="fields">
<div id="hid1"><a href="#" id="did1">
<img src="d.jpg" /></a><a href="#" id="uid1">
<img src="u.jpg" /></a><input type="text" name="p_name[]" id="names" />
<input type="text" name="quant[]" id="quant" size="3" />
<input type="text" name="pr[]" id="price" size="10" />
<input type="text" name="sum_a" id="sum" size="10" disabled="disabled"/>
        </div>
<input type="button" name="nauj" id="nau" value="Add item"/><br />
    </div>
    </form>

When I click "add item" button JS is called:

$("#nau").click(function () {
(newdiv = document.createElement('div')).id = "hid"+ (counter + 1) +"";
newdiv.innerHTML = '<a href="#" id="did'+ (counter + 1) +'"><img src="d.jpg" /></a><a href="#" id="uid'+ (counter + 1) +'"><img src="u.jpg" /></a><input type="text" name="p_name[]" id="names" />
<input type="text" name="quant[]" id="quant" size="3" />
<input type="text" name="pr[]" id="price" size="10" />
<input type="text" name="sum_a" id="sum" size="10" disabled="disabled"/><a href="#" id="delete'+ (counter + 1) +'">X</a>';
             document.getElementById('fields').appendChild(newdiv);
             counter++;
});

Each form fields row has two arrow (up and down) images: <a href="#" id="did'+ (counter + 1) +'"><img src="d.jpg" /></a><a href="#" id="uid'+ (counter + 1) +'"><img src="u.jpg" /></a>

when I click on arrow I need to move all row of form fields up or down (move <DIV id=hid..> ) tried like this but it didint worked.. (move up function)

$("a[id^='uid']").on('click', function() {
            var numrow = $(this).attr("id");
            numrow = numrow.substr(3);
            var nr = 1;

            sumrow = numrow - nr;
            var eil = 'id=' + numrow;
            numrowas = "#hid"+numrow;
            srowas = "#hid"+sumrow;
                    $(numrowas).before($(srowas));
        });

Thanks for advices.

Answer 1

First of all you're not using on() correctly - the event handler isn't binded as you would expect. The correct syntax would be:

// "watch for" elements matching selector "a[id^='did']" created inside #fields
$("#fields").on('click', "a[id^='did']", function(e) {...})

Second of all, you are trying to operate on id attributes to deremine after/before what div to append your current element. That's messy, a cleaner approach is using .next() and .prev() to determine what is the next or previous node in relation to the clicked one.

I've created a fiddle as an example: http://jsfiddle.net/SPgax/22/

Just as a side note: your code is messy, I didn't act on it because it's beyond scope of your question. No offence :)

Answer 2

Same sort of solution as @WTK, using .prev() , but different approach. And oh, I couldn't resist and did some cleanup ;)

See http://jsfiddle.net/WmbmF/4/