Ordonner un <li> par ordre alphabétique

Bonjour,

Je cale sur un point en faisant un site WordPress pour des chercheurs du CNRS, j'espère que vous pourrez m'aider.

Ils publient sur le site des articles avec en bas de chaque article des références qui sont toujours du type "auteur(s)" - "année" - "nom de la publication" - "URL"
Il y en a une vingtaine de références par article...

Ils veulent une page "Références" qui liste toutes les références de tous les articles... Le rendu de cette page, en liste à puces, doit être triée automatiquement par l'initiale du nom de l'auteur. Pour alimenter la liste, je pars sur du copier / coller du bloc qui fini chaque article mais y a t-il un moyen simple d'ordonner le rendu (il y aura à terme plusieurs centaines de réf). En css ? ou du javascript simple (mais je ne connais pas ce langage)

Merci pou votre aide et bonne journée !

Merci pour votre réponse, je regarde ça demain ! Ce serait pr une seule page.

Auriez-vous le script pour que je le teste ?

Volontiers, mais il contient de nombreux appels à des fonctions de mon environnement de programmation. Il faut que je vous fasse une version sans toutes ces adhérences
Je vais tâcher de le faire ce soir ou demain.
Modifié par PapyJP (03 Jan 2023 - 18:32)

Voici une première version
L'hypothèse : la bibliographie a la structure suivante

<ul>
    <li>biblio1</li>
    <li>biblio2</li>
    <li>biblio3</li>
     .....
</ul>

et à la fin de la page un appel au script

<script>biblioSort()</script>

Le code javascript de fonction biblioSort

function biblioSort() {
	const ulNode = document.querySelector('ul'); //rechercher l'élément "ul"
	const liNodes = ulNode.querySelectorAll('li'); //tous les éléments "li" dans "ul"
	const textList = []; //liste pour contenir le contenu des élément "li"
	for(const liNode of liNodes) textList.push(liNode.innerHTML); 
            //mettre dans la liste le contenu HTML des éléments "li"
	textList.sort(); //trier la liste
	ulNode.innerHTML = ''; //vider le contenu de "ul"
	for(const text of textList) {
		const liNode = document.createElement('li'); //fabriquer un element "li"
		liNode.innerHTML = text; //y mettre le texte trié
		ulNode.appendChild(liNode); //ajouter le "li" à "ul"
	}
}

Le fichier test: https://tests.osirisnet.net/tests1/bibio-test.html

Bonne soirée

Salut,

Faire en sorte qu'il y ait au moins une chaîne de cars. uniforme à trier (soit la chaîne cible, soit une copie de la chaîne cible slugifiée par exemple). Ça évitera au mieux le if ... 1 / if .... -1
Modifié par niuxe (04 Jan 2023 - 03:19)

niuxe a écrit :
Salut,

Faire en sorte qu'il y ait au moins une chaîne de cars. uniforme à trier (soit la chaîne cible, soit une copie de la chaîne cible slugifiée par exemple). Ça évitera au mieux le if ... 1 / if .... -1

quel rapport avec les autres messages de cette discussion ?

Quelques points complémentaires:

Le code JavaScript indiqué plus haut est très simple par rapport au code que j'utilise réellement. Tel quel il suppose que les <li> sont correctement remplis de façon uniforme.
S'il y a un espace entre <li> et le nom de l'auteur, ou si le nom d'un auteur contient des caractères diacritiques, tels que À, Ñ ou Å le programme de tri ne fonctionnerait pas correctement: il s'agit d'un tri sur caractères ASCII uniquement.

Autre point : j'ai développé ce programme pour un site géré par une seule personne qui écrit des articles d'égyptologie directement en HTML de base.
Pour des équipes de chercheurs, le codage d'origine est sans doute différent, les références bibliographiques sont sans doute codées différemment selon les normes en vigueur dans la profession. Si le code que vous récupérez est du HTML avec des <li>, il a vraisemblablement été généré par un programme sur le serveur. Si c'est le cas, c'est ce programme qui devrait effectuer le tri, et non pas un script côté client.

PapyJP a écrit :

quel rapport avec les autres messages de cette discussion ?

la méthode sort() peut être un gros casse-gueule.... Je suis intervenu dans la discussion pour optimiser au mieux le trie....
Modifié par niuxe (04 Jan 2023 - 11:47)

Ok je comprends mieux.

Salut,

pour info, tu as des exemples de tri de li sur w3school : https://www.w3schools.com/howto/howto_js_sort_list.asp

bon je ne suis vraiment pas fan de l'algo de tri (on dirait un tri bulle codé avec le cul...) mais je trouve sympa la façon de faire les échanges avec

b[i].parentNode.insertBefore(b[i + 1], b[i]); 

Merci à tous pour vos réponses, je suis un peu débordée cette semaine ms je regarde ça au calme ce week-end !

\ô/
La syntaxe de décomposition permet de simplifier grandement ce genre de tri en permettant de traiter une NodeList, ou une HTMLCollection, comme un Array.

Le script se résume à :

function sortList() {
  const parent = document.getElementById("liste");
  // Spread syntax (...) pour créer un array
  const elements = [...parent.children];
  // le tri est donc accessible
  elements.sort((elA, elB) => {
    return elA.textContent.localeCompare(elB.textContent);
  })
  // rajout brut en fin
  elements.forEach((el) => {
    parent.append(el);
  })
}

La fonction de tri pouvant bien entendu être affinée suivant les besoins.

Très intéressant
Je suis loin d’avoir acquis les bons réflexes avec la syntaxe es6
Modifié par PapyJP (05 Jan 2023 - 10:33)

La solution de Dave est géniale ! Elle est hyper lisible. Je suis allé voir sur MDN et on peut même passer des paramètres intéressants pour localeCompare :

a.textContent.localeCompare(b.textContent, 'fr', {ignorePunctuation: true})

Vraiment j'adore, je garde sous le coude. Merci Dave.

J'ai trouvé une alternative avec Intl.Collator().compare :

function sortList() {
  const list = document.getElementById('list'),
        items = [...list.children],
        collator = new Intl.Collator('fr')
  items.sort((a, b) => collator.compare(a.textContent, b.textContent))
  items.forEach((item) => list.append(item))
}

Le Pen

Différence entre localeCompare() & Intl.Collator().

Tchao.