Discussion :

[ethno]

Bonjour à tous.

N'ayant pas trouvé mon bonheur avec l'ami google je me tourne vers cette belle communauté

Voila, mon problème :

J'ai une belle liste

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<ul id="ma_liste">
  <li id="element1">element1</li>
  <li id="element2">element2</li>
  <li id="element3">element3</li>
</ul>

Suite à une opération, je souhaiterai réorganiser cette liste selon un nouvel ordre connu (par exemple 3,1,2 au lieu de 1,2,3 ici) pour qu'elle devienne ceci sans recharger ma page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<ul id="ma_liste">
  <li id="element3">element3</li>
  <li id="element1">element1</li>
  <li id="element2">element2</li>
</ul>

Ma question est donc la suivante :

Y a t'il un moyen de changer l'ordre d'une telle liste en javascript?

Je vous remercie d'avance

[sachav]

Bonjour,
Oui, en changeant l'innerHTML:
Essayez ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
<ul id="ma_liste">
  <li id="element1"></li>
  <li id="element2"></li>
  <li id="element3"></li>
</ul>
<input type="button" onclick="changeElements()" value="Changer l'ordre">
<script language="javascript">
 
 
function id(obj) {
return document.getElementById(obj);
}
 
function changeElements() {
 
if(id("element1").innerHTML == "element1") {
id("element1").innerHTML = "element3";
} else {
id("element1").innerHTML = "element1";
}
 
if(id("element2").innerHTML == "element2") {
id("element2").innerHTML = "element2";
} else {
id("element2").innerHTML = "element2";
}
 
if(id("element3").innerHTML == "element3") {
id("element3").innerHTML = "element1";
} else {
id("element3").innerHTML = "element3";
}
 
}
 
window.onload=changeElements;
</script>

Vous pouvez reproduire le meme motif pour changer d'autre elements...

[jln13]

Sinon il existe plein de librairies toutes faites et plutot sympa pour trier des listes ^^

http://tool-man.org/examples/sorting.html

[ethno]

Merci beaucoup pour ces réponses si rapides.

@sachav :
Le problème de l'innerHTML, c'est qu'il ne me permet que de changer le contenu de mon élément. Ce que je cherche vraiment c'est un moyen changer l'ordre des éléments eux même et pas uniquement leur contenu malheureusement :s

@jln13 :
Oui, j'utilise la librairie script.aculo.us pour faire du drag & drop sur une autre liste (c'est d'ailleur l'ordre de celle ci qui régira le nouvel ordre de "ma_liste").
Je n'ai pas trouvé comment résoudre mon problème avec cette bibliothèque, c'est pourquoi je me demandai si il n'y avais pas une solution plus "générale".