swap 2 div's index using pure javascript

Question

I have a parent div and it has 9 same div's am trying to swap two div's index. Following is my code:

HTML:

<div id="cont" class="container">
    <div class="no">1</div>
    <div class="no">2</div>
    <div class="no">3</div>
    <div class="blank"></div>
    <div class="no">4</div>
    <div class="no">5</div>
    <div class="no">6</div>
    <div class="no">7</div>
    <div class="no">8</div>
</div>

now I want to swap say 5th and 6th indexed elements. I have no clue how to do that in JavaScript. I know there is function called .index() but how to do that in pure JS.

Will they alway swap by 1 or you could swap, let say 2 and 7 ? — Karl-André Gagnon, Mar 27 '14 at 19:28
`index` would commonly refer to css `index` - I don't think that is what you meant ... you mean 'order' ( ?? ) — Rob Sedgwick, Mar 27 '14 at 19:29
@Karl-AndréGagnon I want to swap any element, if clicked div has blank div next to it, then they should change — Bharat Soni, Mar 27 '14 at 19:36
@Karl-AndréGagnon in my example, elements will be arranged in fashion of 4 in a row, so in this case 3,7 will be next to it, so if clicked on 3 then 3 and blank should be replaced same goes with 7. — Bharat Soni, Mar 27 '14 at 19:41

score 0 · Answer 1 · answered Mar 27 '14 at 19:41

0

Here's one implementation: http://jsfiddle.net/x8hWj/2/

function swap(idx1, idx2) {
    var container = document.getElementById('cont');
    // ditch text nodes and the like
    var children = Array.prototype.filter.call(
        container.childNodes,
        function(node) {
            return node.nodeType === 1;
        }
    );
    // get references to the relevant children
    var el1 = children[idx1];
    var el2 = children[idx2];
    var el2next = children[idx2 + 1];

    // put the second element before the first
    container.insertBefore(el2, el1);
    // now put the first element where the second used to be
    if (el2next) container.insertBefore(el1, el2next);
    else container.appendChild(el1);
}

This starts by getting a list of all element child nodes, then uses insertBefore to rearrange them.

answered Mar 27 '14 at 19:41

nrabinowitz

55,314
10
149
165

adding elements dynamically, so it is giving an error : TypeError: Argument 1 of Node.insertBefore is not an object. this is fiddle link http://jsfiddle.net/x8hWj/2/ how to run this only when clicked on div adjesent to blank div – Bharat Soni Mar 27 '14 at 20:04
That's a separate question - see e.g. http://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick for how to attach an onclick listener. – nrabinowitz Mar 27 '14 at 20:13
Is there a reason not to use jQuery for support here? It would simplify things quite a bit in terms of event handling, matching siblings, etc. – nrabinowitz Mar 27 '14 at 20:14
I know how to attach elements sir, problem is how to attach event on dynamically added elements, like we do `on('click',function)` thing in Jquery. I just wanted a hint about it. – Bharat Soni Mar 27 '14 at 20:15
yes, not using jquery because I was asked not to use Jquery, I can use only JavaScript – Bharat Soni Mar 27 '14 at 20:16
any leads sir, that I should follow for this.. why that error is coming and how to use onclick on dynamic elements. – Bharat Soni Mar 27 '14 at 20:28
There are basically two options for dynamically added elements: 1) attach the handler to each as you add it; or 2) attach the handler to the container and check the event target to determine the handler action. I really think you should start a new question for this part if you need it - I answered the question you posted, and I think the click event handling is a separate problem. – nrabinowitz Mar 28 '14 at 17:16

swap 2 div's index using pure javascript

1 Answers1