2010-08-08 11 views
0

Comment remplacer la localisation par des enfants du même parent?
Je résous d'utiliser ce modèle de code. Y a-t-il un moyen plus facile? Par exemple quelque chose comme ceci: $("#id1").exchange($("#id2"));jQuery - exchange elements location

<!DOCTYPE html> 
    <html> 
    <head> 
     <style> 
     button { display:block; margin:3px; color:red; width:200px; } 
     </style> 
     <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
    </head> 
    <body> 
    <h1>Exchange places</h1> 
    <ul> 
    <li id="a">a</li> 
    <li id="b">b</li> 
    <li id="c">c</li> 
    <li id="d">d</li> 
    </ul> 
    <button>exchange 1st,2nd</button> 
    <button>exchange 1st,4th</button> 
    <button>exchange 2nd,3rd</button> 
    <script> 

     $("button:first").click(function() { 
      var cp = $("li:eq(0)").clone(); 
      $("li:eq(0)").replaceWith($("li:eq(1)").clone()); 
      $("li:eq(1)").replaceWith(cp); 
     }); 

     $("button:eq(1)").click(function() { 
      var cp = $("li:eq(0)").clone(); 
      $("li:eq(0)").replaceWith($("li:eq(3)").clone()); 
      $("li:eq(3)").replaceWith(cp); 
     }); 

     $("button:last").click(function() { 
      var cp = $("li:eq(1)").clone(); 
      $("li:eq(1)").replaceWith($("li:eq(2)").clone()); 
      $("li:eq(2)").replaceWith(cp); 
     }); 
    </script> 

    </body> 
    </html> 

Répondre

1

Vous devriez envisager d'utiliser .sortable() avec Jquery UI. Pas de boutons inutiles, beaucoup plus faciles à manipuler.

Take a look

+0

Merci d'avoir répondu. Dans mon projet, les éléments li sont des éléments div avec un lien "monter" "descendre". Pour ma situation, je n'ai vraiment pas besoin d'un 'plug-in' supplémentaire pour faire des excanges car je n'ai pas besoin de fonctions de glisser. – Mattia