Comment afficher X numéro de LI à partir d'une liste en utilisant javascript (pas de frameworks)?

Question

J'ai un menu qui est rempli par un serveur et je n'ai pas accès au serveur. Je suis donc limité à faire cela du côté client.

À l'heure actuelle, il y a un menu déroulant sur la navigation avec 14 choix. Le client veut montrer seulement 3 d'entre eux. Ils n'utilisent pas de frameworks comme jquery ou mootools, donc je dois le faire à l'ancienne, mais je suis au mur.

<ul id='mylist'>
<li>option 1</li>
<li>option 2</li>
<li>option 3</li>
<li>option 4</li>
<li>etc</li>
</ul>

Quel est le code javascript pour ajouter à la liste des articles display:none 4-14?

(cela m'aide aussi à revenir aux fondamentaux de JS et à ne pas me fier aux frameworks).

Merci pour votre aide!

Answer 1

Vous pouvez faire un getElementById() pour obtenir le menu, puis getElementsByTagName() pour les LI qui retourneront un tableau (par exemple items []). Puis changez le style pour les éléments [3] en éléments [13].

Modifier

Je vous ai fait un petit code:

var menu = document.getElementById('mylist'); 
var LIs = menu.getElementsByTagName('li'); 
for(var i = 3; i< 14; i++) 
    LIs[i].style.display='none'; 

Answer 2

Vous pouvez utiliser CSS en JavaScript.

Voici la référence: http://codepunk.hardwar.org.uk/css2js.htm

plus, consultez référence Mozilla JavaScript.

Answer 3

Quelque chose comme ça? (Du haut de ma tête, désolé si elle est bâclée)

var children= document.getElementByid("mylist").childNodes; 
for (var i = 0; i < children.length; i++){ 
    if (i < 2) children[i].style.display = "none"; 
} 

Answer 4

Vous devrez saisir les nœuds enfants de la liste et définissez la propriété style.display de chacun de ceux que votre client ne veut pas Voir à none. Cela ne semble pas trop compliqué, mais la collection de nœuds enfants peut contenir des éléments, des nœuds de texte, des commentaires, etc. Vous devrez donc vérifier que le nœud est un élément avec tagName de "LI" avant le traitement. Voici un code qui devrait faire l'affaire.

for (var node = document.getElementById('mylist').firstChild; node != null; node = node.nextSibling) { 
    if (node.type === 1 && node.tagName.toUpperCase() === "LI") { 
     if (/* node is not one of the ones your client wants to see */) { 
     node.style.display = 'none'; 
     } 
    } 
}