Change place div with jquery

Question

Change place div with jquery

Navigation

#1 by (3 votes)
#2 by (1 votes)

2

Let's say I have a div mother, and within that div I have other 3. And a Button.

<div id="mae">
    <div id="a" class="child"></div>
    <div id="b" class="child"></div>
    <div id="c" class="child"></div>
</div>

<button id="Trocar">Trocar Div</div>

I would like, when I clicked the button, the divs would change positions! Actually I would like the first div to be in the last, and the next div to take the first position! And so on!

Ex :: Cliquei uma vez
    <div id="mae">        
        <div id="b" class="child"></div>
        <div id="c" class="child"></div>
        <div id="a" class="child"></div>
    </div>

Ex :: Cliquei duas vezes
    <div id="mae">
        <div id="c" class="child"></div>
        <div id="a" class="child"></div>
        <div id="b" class="child"></div>
    </div>

Ex :: Cliquei três vezes
    <div id="mae">        
        <div id="a" class="child"></div>
        <div id="b" class="child"></div>
        <div id="c" class="child"></div>
    </div>

As you can see! The cycle repeats itself!

jquery div

asked by anonymous 04.09.2015 / 01:46

2 answers

1

$('#Trocar').click(function() {
   $('#mae div:first-child').appendTo($('#mae'));
});

05.12.2015 / 04:55

Disappearing Button On The Side Using the pthread library in windows environment

score 3 · Accepted Answer

$('#Trocar').click(function() {
    $('#mae div:first-child').remove().insertAfter($("#mae div:last"));
});

Complete example:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><scripttype="text/javascript">
$().ready(function() {

    $('#Trocar').click(function() {
        $('#mae div:first-child').remove().insertAfter($("#mae div:last"));
    });

});
</script>
</head>
<body>

<div id="mae">
    <div id="a" class="child">a</div>
    <div id="b" class="child">b</div>
    <div id="c" class="child">c</div>
</div>

<button id="Trocar">Trocar Div</div>

</body>
</html>