Modification de l'ordre des éléments

Je suis entrain de créer un site web de largeur variable. Les utilisateurs de l'utilisation des écrans de résolution full HD de certains 600px sur les téléphones intelligents, il semble une assez bonne idée. Ceci nous amène à une très intéressante problème.

Lorsque l'utilisateur utilise une résolution plus petite que ce qui est optimal de la page obtient beaucoup plus de hauteur. Cela signifie qu'il pourrait être utile à l'ordre de changement de certains éléments (par exemple une image, la zone de recherche ou de navigation) pour rendre la page plus lisible sans avoir besoin beaucoup de scrooling.

Donc j'ai besoin d'être en mesure d'accéder à DOM et changement de l'ordre de quelques éléments de la page (swap).

Permet de dire que j'ai une liste et nécessaire de changer de point 1 et 2.

<ul>
  <li>1</li>
  <li>2</li>
</ul>

J'ai trouvé une solution basée sur l'ajout de déjà des éléments de <ul> par l'aide de la fonction appendChild. Il y a cependant un problème avec les nœuds de texte et ça devient vraiment compliqué de le faire pour le plus difficile de l'élément de structure, puisque le besoin de recréer à nouveau.

Avez-vous des suggestion pour l'améliorer?

Il est temps d'investir dans l'apprentissage de jQuery. Il rend ce type d'activité est beaucoup plus facile.
Les Media queries?.
Pouvez-vous, s'il vous plaît, plus précis? J'ai maintenant la bibliothèque, mais un lien vers l'API utile pour ce serait utile.
Avez-vous essayé d'utiliser jquery sortable ? jqueryui.com/sortable

OriginalL'auteur Rusty Horse | 2011-10-12

  1. 15

    Pour ce cas simple (échange les deux seuls éléments), vous pouvez simplement utiliser appendChild() (violon)

    var list = document.querySelector("ul");
list.appendChild(list.firstElementChild);

    Le même nœud ne peut pas exister dans de multiples positions, donc il est retiré de sa position actuelle et placé à la fin de la collecte.

    Si vous voulez faire plus compliqué de tri, vous pourrait probablement créer un tableau à partir de la childNodes (yaf) et obtenez tous fous:

    var list = document.querySelector("ul");
var items = list.querySelectorAll("li");
var sortedList = Array.from(items).sort(function(a, b) {
  var c = a.firstElementChild.textContent,
  d = b.firstElementChild.textContent;
  return c < d ? -1 : c > d ? 1 : 0;
});
for (let item of sortedList) {
  list.appendChild(item);
}

    OriginalL'auteur canon

  2. 1

    ne serait pas la permutation innerHTML aussi le travail?

    var myList = document.getElementsByTagName("ul")[0]; 
temp = myList.getElementsByTagName("li")[0].innerHTML;
myList.getElementsByTagName("li")[0].innerHTML = myList.getElementsByTagName("li")[1].innerHTML;
myList.getElementsByTagName("li")[1].innerHTML = temp;
    Être prudent lors de l'écriture de innerHTML il pourrait avoir des effets indésirables sur les gestionnaires d'événements et d'autres propriétés. Par exemple: stackoverflow.com/a/5113120/370786
    cela se produit lorsque vous essayez cela avec le document.corps, mais pas dans ce cas. un simple exemple -> jsfiddle.net/tzv5db93

    OriginalL'auteur Emir Akaydın

  3. 1

    En 2018 (et déjà il y a quelques années), c'est possible avec juste CSS. Votre cas d'utilisation pourrait être résolu par quelque chose comme ceci:

    ul {
  display: flex;
  flex-direction: column;
}

li:nth-child(2) {
  order: -1;
}
    Trop mauvais flex ne fonctionne pas / est buggé sur des balises html fieldsets 🙁

    OriginalL'auteur daniels