JQuery: loosing the id when using replaceWith() method

Question

I am trying to implement a function which will change the elements order in a table. The logic is very easy: Each TR (except the first and the last ones) has a button_up and a button_down. When the user clicks one of those buttons, the element will change his place with the one above or below.

To do this, I am using jQuery and each TR has a unique Id and the buttons have a common class.

When a button with the specific class is clicked, I am executing this JavaScript code:

$('.upArrow').click( function(something)     
        {           
            var id = $(this).attr("id");

            var n=id.split("_");

            var new_id = '#row_'+n[1];

            var parent =$(new_id);
            var prev = $(new_id).prev();

            swap(prev, parent); 

            init_authors_list_ordering();
        });


        $('.downArrow').live('click', function()
        {
             var id = $(this).attr("id");

                var n=id.split("_");

                var new_id = '#row_'+n[1];

                var parent =$(new_id);
                var next = $(new_id).next();

                swap(next, parent); 

                init_authors_list_ordering();
        });
}

function swap(a, b, direction)
{
    var html = a.wrapInner('<tr></tr>').html();
    a.replaceWith(b.wrapInner('<tr></tr>').html());
    b.replaceWith(html);
}

The problem is that: The first time, everything works fine (my funxtion is not finished, I have to set some other parameters on change but the logic is there). But then, The two elements who changed their place have lost the TR's id, so they can't be touched anymore.

I don't know why the id is lost. This is the replaceWith() method.

Any help is welcome. Thank you.

You don't have to replace the elements to swap them -> `a.before(b);` — adeneo, Dec 07 '12 at 13:06
This should help : http://stackoverflow.com/questions/698301/is-there-a-native-jquery-function-to-switch-elements — Denys Séguret, Dec 07 '12 at 13:07
@adeneo, as easy as that. Thanks a lot. Could you please answer the question so I could confirm. Thanks — Milos Cuculovic, Dec 07 '12 at 13:10
@dystroy, Thanks a lot. the before or after function is excellent. — Milos Cuculovic, Dec 07 '12 at 13:11

score 1 · Accepted Answer · answered Dec 07 '12 at 13:20

1

To swap the elements, simply do:

function swap(a, direction, b) {
    a[direction](b);
}

and call like:

var firstElem  = $('#divID'),
    secondElem = $('#divID');

swap(firstElem, 'before', secondElem); // or after, whatever you need ?

FIDDLE

answered Dec 07 '12 at 13:20

adeneo

312,895
29
395
388

Mark Schultheiss · Answer 2 · 2012-12-07T13:18:22.033

0

Your constant <tr></tr> has no id attribute, so it ends up with no id attribute.

EDIT: Here is what I reference:

function swap(a, b, direction)
{
    var html = a.wrapInner('<tr></tr>').html();
    a.replaceWith(b.wrapInner('<tr></tr>').html());
    b.replaceWith(html);
}

edited Dec 07 '12 at 13:18

answered Dec 07 '12 at 13:11

Mark Schultheiss

32,614
12
69
100

The has an id attribute in my template (html) – Milos Cuculovic Dec 07 '12 at 13:16
Note, my answer is WHY, but not the HOW to fix it, that is up to you to decide, use `.before(), .after()` or adjust the id - they have differing impact on the DOM interaction. – Mark Schultheiss Dec 07 '12 at 13:22

JQuery: loosing the id when using replaceWith() method

2 Answers2