CODEWITHSUNDEEP
javascriptjqueryhtml
Sergei Panfilov
Sergei Panfilov

Reputation: 1221

Jquery: Swap Div's html

If i have structure like this: 

<div class = "table">
    <div class="table-cell"></div>
    <div class="table-cell"></div>
</div>

Am I able to change this two cells using JS or jQ without changing names of div's ?

ps. Div's are floated left and right. I am doing this in order to change position of elements according to meta id's in my WP post page.

Upvotes: 0

Views: 101

Answers (3)

Chris
Chris

Reputation: 1111

If you want to be able to swap the two divs float quality then you have to have a unique class or Id to define them.

I suggest creating a css class called "left" and "right" adding it to the div dynamically. For example given the structure: 

`<div class = "table">
    <div class="table-cell left"></div>
    <div class="table-cell right"></div>
</div>`

You could write a js function to swap floats.

function swap(){
   var oldLeft = document.getElementByClassName("left")
   var oldRight = document.getElementByClassName("right")
   oldLeft.className.replace( /(?:^|\s)table-cell right(?!\S)/g , '' )
   oldRight.className.replace( /(?:^|\s)table-cell left(?!\S)/g , '' )
}

You don't need the regEx really. You could just put the table-cell right or left in the replace method. I hope that is what you were looking.

Upvotes: 0

Lajos Arpad
Lajos Arpad

Reputation: 76424

Your divs do not have names, though they have classes. Their content can be changed this way:

var aux = $(".table > .table-cell:eq(0)").html();
$(".table > .table-cell:eq(0)").html($(".table > .table-cell:eq(1)").html());
$(".table > .table-cell:eq(1)").html(aux);

Note, that it is better to use the child > operator if you know that these are children than the descendant operator (space), since this means that.

Upvotes: 0

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93551

Your example has the same names, so not sure why you ask that the names not be changed. Ignoring that for now...

You can swap the contents, or just move the elements.

Swap:

var divs = $('.table div.table-cell');
var html = divs.eq(0).html();
divs.eq(0).html(divs.eq(1).html());
divs.eq(1).html(html);

If you prefer to just swap the order, something like:

$('.table div.table-cell:last').prependTo('.table');

References:

Upvotes: 2

Related Questions