Bonjour,
J'ai un petit soucis de CSS je suppose : j'ai une liste <ul> composé de plusieurs <li>.
Au départ, ma liste ressemble à ceci :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3 <ul id="sideFeatures" style="height:350px; overflow-x:hidden; overflow-y:scroll;"> <li class="draggableItem" draggable="true" idfeature="17">Item 1 </li> </ul>
Puis, depuis JavaScript, j'ajoute des <li> dans ma liste, comme ceci :
Code javascript : 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 function completeListSlideTab(dico, container /* ul */){ var doctype = document.implementation.createDocumentType('xml', '', ''); var domxml = document.implementation.createDocument('', 'xml', doctype); var i = 0; var currentLi = undefined; for (i = 0; i < dico.features.length; i++){ currentLi = domxml.createElement("li"); currentLi.setAttribute("class", "draggableItem"); // same thing as above.. currentLi.className = "draggableItem"; currentLi.setAttribute("draggable", "true"); currentLi.setAttribute("idFeature", dico.features[i].id); // currentLi.setAttribute("id", "li" + i); currentLi.textContent = dico.features[i].name; container.appendChild(currentLi.cloneNode(true)); //<li class="draggableItem" draggable="true">Item 1 } }
Cette fonction est appelée depuis mon HTML, et j'obtiens bien un <ul> avec plusieurs <li> (comme souhaité).
Cependant, le style CSS n'est pas appliqué à mes <li> tout juste créés en JavaScript. Je me retrouve donc avec une <li> (celle créée depuis le HTML) avec un beau style, et les autres sans style du tout..
(voila le code que j'obtiens pour mon élément <ul> :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8 <ul id="sideFeatures" style="height:350px; overflow-x:hidden; overflow-y:scroll;"> <li class="draggableItem" draggable="true" idfeature="17">Item 1 </li> <li class="draggableItem" draggable="true" idFeature="idCF1" id="li0">CF1</li> <li class="draggableItem" draggable="true" idFeature="idCF2" id="li1">CF2</li> <li class="draggableItem" draggable="true" idFeature="idCF3" id="li2">CF3</li> <li class="draggableItem" draggable="true" idFeature="idCF4" id="li3">CF4</li> <li class="draggableItem" draggable="true" idFeature="idCF5" id="li4">CF5</li> </ul>
Je ne comprends pas pk le style n'est pas appliqué aux autres <li>... Si qqun a une idée, je suis grandement preneur
Bonnes fêtes de fin d'année à tous, et merci d'avance pour votre aide,
G.S
Partager