Dev Faq
0
votes

Comment ajouter une classe à li élément qui a un élément d'enfant UL dans pure javascript non pas jQuery

Comment puis-je ajouter une classe à un

  • code> qui a un enfant
      code>. J'ai trouvé qu'il y a tellement d'exemples dans JQuery mais pas à JavaScript. Je voudrais le faire dans Pure JavaScript pour l'optimisation de la performance. Le code est le suivant: Merci d'avance! 
    <nav id="navigation">
    <li><a href="#">Home</a></li>
    <li> <!-- >>> I want to add a class to this <li> element as it has a <ul> child element -->
       <a href="#">Services</a>
       <ul>
        <li><a href="">Graphic Designing</a></li>
        <li><a href="">Web Designing</a></li>
       </ul>
    </li>
    <li><a href="#">Contact</a></li>
</nav>

    • 1 commentaires

    Saisissez tous les éléments

  • et vérifiez si l'un de leurs .children s est un
      élément ou saisissez tous < ul> éléments et vérifiez si leur .parentelement est un
    • ou saisissez tous les éléments
        éléments qui sont directs enfant d'un
      • élément, ou ...

    • 4 Réponses :

    4
    votes

    Je pense que vous avez besoin de quelque chose comme ça xxx pré>

    ressources utiles pour passer de jQuery à pure JavaScript (vanille): p>

    6 commentaires

    "Sans utiliser jQuery"

    Cela ajouterait également la classe à l'extérieur

  • dans
    • foo

      @Waiskamal Oui, sans utiliser jQuery, vous avez les deux version :)

      Oh mon mauvais. Désolé. Mieux vaut supprimer la version JQuery Cuz Ce n'est pas ce que demande l'OP :)

      Merci Francesco Orsi, m'a montré la version à la fois pour comprendre la logique.

      @Renjitsm de vous êtes la bienvenu. N'oubliez pas de marquer l'une des réponses en cliquant sur la coche en haut à gauche de votre réponse préférée.

    • 2
    votes

    Ceci est un moyen possible d'ajouter la classe à l'élément li code> qui a ul code> comme enfant

    p> 

    <li><a href="#">Home</a></li>
<li>
  <a href="#">Services</a>
  <ul>
    <li><a href="">Graphic Designing</a></li>
    <li><a href="">Web Designing</a></li>
  </ul>
</li>
<li><a href="#">Contact</a></li>

    2 commentaires

    Cela ajouterait également la classe à l'extérieur

  • dans
    • foo

      Merci Nithish, pour votre exemple

    • 2
    votes

    Vous pouvez faire cela deux forts> ci-dessous en utilisant uniquement JavaScript code> hors cours.

    Voici simple Direct code> Solution pour ajouter la classe à Le li code> qui a ul code>. Ceci sélectionne le premier li> ul code> dans le DOM et appliquez la classe à l'aide de la classe Classlist et Ajouter Méthode. P>

    Démo en direct: strong> P>

    P> 

    <nav>
  <li><a href="#">Home</a></li>
  <li>I want to add a class to this element as it has a child element
    <a href="#">Services</a>
    <ul>
      <li><a href="">Graphic Designing</a></li>
      <li><a href="">Web Designing</a></li>
    </ul>
  </li>
  <li><a href="#">Contact</a></li>
</nav>

    5 commentaires

    Cela ajouterait également la classe à l'extérieur

  • dans
    • foo

      @Andreas avec structure actuelle => non Ce ne sera pas - quel est le point ici à venir avec vos propres scénarios? La solution est fournie à la structure HTML donnée.

      C'est ce qu'on appelle un "indice" pour un problème pour un problème possible si la structure est légèrement différente ou si elle change à l'avenir.

      Merci Alwayshelping, pour votre exemple

      Andreas Astuce est bon de savoir si le menu va à une structure complexe. Merci pour l'indice.

    • 2
    votes

    Démo Snippet Strong>

    P> 

    <html>
<head></head>
<body>
  <li><a href="#">Home</a></li>
  <li>
    <a href="#">Services</a>
    <ul>
      <li><a href="">Graphic Designing</a></li>
      <li><a href="">Web Designing</a></li>
    </ul>
  </li>
  <li><a href="#">Contact</a></li>
<script src="script.js"></script>
<body>
</html>

    0 commentaires

    Articles qui pourrait vous intéresser :

    Impossible d'importer le module "@ angular / material"
    Interaction profonde avec break and catch
    Utilisation de node.js comment renommer tous les fichiers d'un dossier
    Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO