Javascript Girl
  1. Javascript Girl
  3. Modifier les divs d'ordre avec jQuery
Intereting Posts
Comment créer un plugin jQuery avec des méthodes? Javascript: Écrivez la sortie console.debug () sur le navigateur? Restangulaire – _.contains () n'est pas une fonction Événement côté serveur HTML5: EventSource vs wrapped WebSocket Comment déclarer la fonction locale dans la classe ES6? Définissez certaines options spécifiques dans plusieurs sélections comme désactivées et sélectionnées Javascript utilise MutationObserver pour détecter le changement de valeur dans l'étiquette d'entrée AngularJS: Pourquoi ng-bind est-il meilleur que {{}} en angulaire? D3js transforme les images de groupe imbriquées Quand dois-je utiliser _.bindAll () dans Backbone.js? Comment définir la couleur d'un pixel sur un canevas en utilisant WebGL? Suppression de l'élément du tableau avec Underscore.js AngularUI-Bootstrap's Typeahead ne peut pas lire `length` Propriété de` undefined` Trier le tableau alphanumérique mixte Composante modal sémantique UI sur Fermer avec réagir

Modifier les divs d'ordre avec jQuery

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

Est-il possible de modifier cette divs avec jQuery? Je souhaite 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 ferai cela seulement – si le document est prêt.

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

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

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

http://jsfiddle.net/rP8EQ/

Edit: Si vous voulez une solution plus générale d'ajouter le premier au dernier, sans recourir aux classes explicites: 

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

Juste faire $('.one').insertAfter('.three'); 

 $("#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/

Il suffit d'utiliser InsertAfter comme la réponse précédente a dit

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

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

Vous pouvez le faire par cette 

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

Donc, div un et div deux changeront leur position.

J'espère que cela peut vous aider.

Voici un exemple simple avec les 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