CODEWITHSUNDEEP
jquery
Gramrock
Gramrock

Reputation: 49

Swapping two children of parent.parent in jquery not working

What am I doing wrong here ?

So i basically want to go back 2 parents from the swap button, which is the main div which contains two specific divs with certain classes "imagentextimage" and "imagentexttext" which I want to swap.

also, is there a better way to just say "swap" instead of having to check wheter an element is before or after another and then swap according to that ? Because i only want to swap then back and forth.

my html is this

<div class="smallbox-wrapper imagentextboxicon" id="row1">
<div class="widewrapper">
    <input type="button" class="swapbutton" value="⇔">
    <input type="button" class="deletebutton " value="X" onclick="delete_row('row2')">
</div>

<div class="smallbox imagentextimage">
    <div class="smallbox twoxboximage" contenteditable="true" placeholder="image.."></div>
</div>

<div class="smallbox imagentexttext">
    <div class="smallbox twoxboximage" contenteditable="true" placeholder="Optional Image.."></div>
    <div id="title" class="smallbox twoxboxheader" contenteditable="true" placeholder="Optional Header.."></div>
    <div class="smallbox twoxboxtext" contenteditable="true" placeholder="Text.."></div>
</div>

<div class="up"></div>
<div class="down"></div>
</div>

And I have this Js which fires if i click the swap button

//Swap button (for image & text)
$(document).on('click', ".swapbutton", function() {
    $(this).parent().parent(".imagentexttext").before($(this).parent().parent(".imagentextimage"));
});

the button does work with alert(); but here I don't get any errors and don't really know what I'm doing wrong.

Can someone explain to me why this isn't working please.

Much appreciated. Love Gram

Upvotes: 1

Views: 67

Answers (2)

Himanshu Upadhyay
Himanshu Upadhyay

Reputation: 6565

You can do in this way:

$(document).ready(function(){
    var flag_on = 1;
    $(document).on('click', ".swapbutton", function() {
        if(flag_on == 1){
            $(".imagentexttext").hide();
            $(".imagentextimage").show();
        }else{
            $(".imagentextimage").hide();
            $(".imagentexttext").show();
        }

    });
});

Upvotes: 0

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

You can find image and text inside parent of parent of button using closest and then check index of image and text to decide if image to be added before or after text.

see below code

$(document).ready(function(){
  $('.swapbutton').click(function(){
    var $parent = $(this).closest('div.smallbox-wrapper');
    var $text = $parent.find('.imagentexttext');
    var textIndex = $text.index();
    var $img = $parent.find('.imagentextimage');
    var imgIndex = $img.index();
    if(textIndex > imgIndex) {
        $img.before($text);
    } else {
      $img.after($text);
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="smallbox-wrapper imagentextboxicon" id="row1">
<div class="widewrapper">
    <input type="button" class="swapbutton" value="⇔">
    <input type="button" class="deletebutton " value="X" onclick="delete_row('row2')">
</div>

<div class="smallbox imagentextimage">
    <div class="smallbox twoxboximage" contenteditable="true" placeholder="image..">img</div>
</div>

<div class="smallbox imagentexttext">
    <div class="smallbox twoxboximage" contenteditable="true" placeholder="Optional Image..">Text</div>
    <div id="title" class="smallbox twoxboxheader" contenteditable="true" placeholder="Optional Header..">test</div>
    <div class="smallbox twoxboxtext" contenteditable="true" placeholder="Text..">text</div>
</div>

<div class="up"></div>
<div class="down"></div>
</div>

Upvotes: 1

Related Questions