web-dev-qa-db-fra.com

changer l'ordre divs avec jQuery

<div class="test one">aaa</div>
<div class="test two">bbb</div>
<div class="test three">ccc</div>

Est-ce que possible changer l'ordre ce div avec jQuery? Je voudrais recevoir:

<div class="test two">bbb</div>
<div class="test three">ccc</div>
<div class="test one">aaa</div>

je ne peux utiliser que jQuery

LIVE: http://jsfiddle.net/cmVyM/

Je vais en faire un seul - si le document est prêt.

javascriptjqueryhtmlcss
17
David Apshid

On dirait que vous voulez déplacer la première division après la dernière.

$.fn.insertAfter insère les éléments correspondants après le paramètre:

$(".test.one").insertAfter(".test.three");

http://jsfiddle.net/rP8EQ/

Edit: Si vous souhaitez une solution plus générale d’ajout du premier au dernier, sans recourir aux classes explicites:

var tests = $('.test');
tests.first().insertAfter(tests.last());
63
Zirak

Voici un exemple simple avec des boutons de navigation.

HTML

<ul>
  <li>1 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
  <li>2 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
  <li>3 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
  <li>4 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
  <li>5 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
  <li>6 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
</ul>

Javascript avec JQuery

$('.up').on('click', function(e) {
    var wrapper = $(this).closest('li')
    wrapper.insertBefore(wrapper.prev())
})
$('.down').on('click', function(e) {
    var wrapper = $(this).closest('li')
    wrapper.insertAfter(wrapper.next())
})

Essayez-le ici: https://jsfiddle.net/nguyenvuloc/vd105gst

4
Loc Nguyen
$("#botao").click(function(){       

$("#a3").insertBefore("#a1");   

}); 

<div id="a1">a1</div>
<div id="a2">a2</div>
<div id="a3">a3</div>

<div>
<a id="botao">altera</a>
</div>

Voir: http://jsfiddle.net/GeraldoVilger/2B6FV/

2
Geraldo Vilger

Il suffit de faire $('.one').insertAfter('.three');

2
deviousdodo

Il suffit d'utiliser insertAfter comme le disait la réponse précédente

http://jsfiddle.net/cmVyM/68/

var eerste = $('.one');
var tweede = $('.two');
var derde = $('.three');

tweede.insertAfter(derde);
eerste.insertAfter(tweede);
1
Wannes

Si vous souhaitez changer l'ordre du groupe de divs avec le même nom de classe (par exemple, donné ci-dessous):

<div class="wrapper">
  <span class="text">First Heading</span>
  <span class="number">1</span>
</div>
<div class="wrapper">
  <span class="text">Second Heading</span>
  <span class="number">2</span>
</div>
<div class="wrapper">
  <span class="text">Third Heading</span>
  <span class="number">3</span>
</div>

Vous pouvez le commander à nouveau à l'aide du code jQuery suivant:

$('.wrapper .number').each(function () {
  $(this).insertBefore($(this).prev('.text'));
});

https://jsfiddle.net/farhanmae/9th3drvd/

1
Farhan Erooth

Vous pouvez le faire par ceci

var obj = $('.test.two');

obj.after(obj.prev());

alors, div un et div deux vont changer leur position.

J'espère que cela peut vous aider.

0
Yann叶