Javascript Girl
  1. Javascript Girl
  3. Comment puis-je modifier l'ordre des éléments enfants dans JS?
Intereting Posts
ASP.NET: Avertissement sur les fenêtres de fermeture de données modifiées Conversion d'une chaîne hexadécimal d'une image brute en image bitmap en JavaScript Erreur lors de l'appel de la méthode javascript à partir de l'applet Comment valider une entrée de valeur décimale? Comment formater des nombres similaires au format de réputation de débordement de pile Détecter la balise <embed> en charge de la vidéo Déterminer la taille originale du navigateur croisé d'image? Ouvrez une nouvelle fenêtre pour la connexion sociale, puis fermez et revenez aux parents pour réussir avec Django Importer des contacts depuis Outlook avec JS Vous trouvez quel numéro de ligne existe un élément dans le dom en Javascript? Comment modifier et gérer plusieurs thèmes de couleurs au moment de l'exécution avec css? Utilisez "pastefromword" Filtrage sur tout le contenu collé dans CKEditor 3 D3, SVG et Javascript: besoin d'assigner des images uniques aux nœuds créés dynamiquement Séquencer les requêtes ajax Passer les variables au contrôleur AngularJS, les meilleures pratiques?

Comment puis-je modifier l'ordre des éléments enfants dans JS?

J'ai ce html: 

<table> <tr> <td> Set right order </td> <td> <span style = "display: block;">asd | <a href = '#' onclick = "moveChoiceTo(this, -1);">&uarr;</a><a href = '#' onclick = "moveChoiceTo(this, 1);">&darr;</a></span> <span style = "display: block;">dsa | <a href = '#' onclick = "moveChoiceTo(this, -1);">&uarr;</a><a href = '#' onclick = "moveChoiceTo(this, 1);">&darr;</a></span> <span style = "display: block;">qwe | <a href = '#' onclick = "moveChoiceTo(this, -1);">&uarr;</a><a href = '#' onclick = "moveChoiceTo(this, 1);">&darr;</a></span> <span style = "display: block;">ewq | <a href = '#' onclick = "moveChoiceTo(this, -1);">&uarr;</a><a href = '#' onclick = "moveChoiceTo(this, 1);">&darr;</a></span> </td> </tr> </table>

Et ce JS: 

 function moveChoiceTo(elem_choice, direction) { var curr_index = -1; //index of elem that we should move var td = elem_choice.parentElement.parentElement; //link to TD for (var i = 0; i < td.children.length; i++) //determine index of elem that called this function if (td.children[i].children[0] == elem_choice) { curr_index = i; break; } if (curr_index == -1) return; if (curr_index == 0 && direction < 0) //if nowhere to move return; if (curr_index == td.children.length - 1 && direction > 0) //if nowhere to move return; var curr_child = td.children[curr_index]; //save current elem into temp var td.children.splice(curr_index, 1); //here I getting exception that splice isn't supported by object, but arent this is array? td.children.splice(curr_index + direction, 0, curr_child); //attempt to insert it }

Je suis exceptionnel que l' splice n'est pas prise en charge, mais cela est-il censé être un tableau et soutenir cette méthode? Quelles autres façons de changer l'ordre des enfants?

Je vais ajouter la réponse avec une approche plus simple (et meilleure): 

 function moveChoiceTo(elem_choice, direction) { var span = elem_choice.parentNode, td = span.parentNode; if (direction === -1 && span.previousElementSibling) { td.insertBefore(span, span.previousElementSibling); } else if (direction === 1 && span.nextElementSibling) { td.insertBefore(span, span.nextElementSibling.nextElementSibling) } }

L'idée clé est d'utiliser la méthode insertBefore correctement. Vous n'avez pas besoin de supprimer quoi que ce soit de DOM.

Demo: http://jsfiddle.net/dq8a0ttt/

Splice n'est pas supproqué dans HTMLCollection, vous devez utiliser .removeChild et .insert avant quelque chose comme ceci: 

 var before = td.children[curr_index + direction]; var child = td.children[curr_index]; td.removeChild(child); td.insertBefore(child, before); //attempt to insert it