{JQUERY} Ajouter du html après un éléments précis

Bonjour,

Je suis actuellement sur un site, et je rencontre un petit problème. Je dois dans un menu de navigation ajouter un bout de code à la suite d'un élément, j'ai indiqué l'emplacement précis dans le code en écrivant " {! - ICI - !} "

<nav id="mainnav" class="mainnav">
    <ul id="menu-header" class="menu">
        <li><a href="#">Accueil</a></li>
        <li><a href="#">titre menu 1</a></li>
        <li><a href="#">titre menu 2</a> {! - ICI - !} </li>

    <ul class="sub-menu">
        <li><a href="#">titre menu 3</a></li>
        <li><a href="#">titre menu 4</a></li>
        <li><a href="#">titre menu 5</a></li>
        <li><a href="#">titre menu 6</a></li>
        <li><a href="#">titre menu 7</a></li>
        <li><a href="#">titre menu 8</a></li>
    </ul>

    <li><a href="#">titre menu 9</a></li>

    </ul>
</nav>

J'ai réussi à cibler le <li> avec ce code :

<script>    $('#menu-header :nth-child(3)').append('<i class="fa fa-angle-down" aria-hidden="true"></i>');  </script>

Cependant je souhaites, comme indiquer plus haut, cibler après le </a> pour ajouter un petit bout de code...

Je vous remercies par avance pour votre aide !

Bonjour Ploping,
Je pense que on doit pouvoir faire :

 $('#menu-header > li:nth-child(3) > a').after('<i class="fa fa-angle-down" aria-hidden="true"></i>');
ou
  $('#menu-header a').get(2).after('<i class="fa fa-angle-down" aria-hidden="true"></i>');  

Je reviens vers vous, car mon code n'est pas bon finalement...

Je vous mets à disposition le code pour que vous puissiez tester concrètement la chose.


https://bsteven-srv7.formations-web.alsace/html/


Donc la contrainte est la suivante :

Je dois voir apparaître ce bout de code :

<i class="fa fa-angle-down" aria-hidden="true"></i>

Uniquement après le 3ème <a> donc juste après l'élément "nos services" (comme indiquer dans les commentaires du dessus).

De cette manière, si le client potentiel veut ajouter un élement de menu, le bout de code reste au même endroit.
Une personne à réusi à la faire en utilisant la fonction ".prev", mais impossible d'avoir accès à son aujourd'hui étant donné qu'il est absent.

Voilà voilà ... N'hésitez pas à y jetter un coup d'oeil, merci d'avance
Modifié par Ploping (21 May 2019 - 13:48)

Salut,

La solution de aliasdmc correspond pile a ce que tu décris depuis ton premier post :

Qu'est-ce qui ne te convient pas ?
Modifié par _laurent (21 May 2019 - 14:58)

La faute vient de moi, je me suis mal exprimé, toutes mes excuses

Rahhh quel boulet je suis !

<li><a href="#">titre menu 2 {! - ICI - !} </a> </li>

C'est en fait dans la balise <a> que je souhaite avoir l'élément, afin que le chevron se place juste après le mot "services" et pas après la balise <a>


Encore une fois désolé pour mon inattention !...

Ca change tout hein,

.append au lieu de .after

$('#menu-header > li:nth-child(3) > a').append('<i class="fa fa-angle-down" aria-hidden="true">test</i>');

Tout a fait, j'attendais presque cette remarque

Du coup plutôt que de sélectionner le 3eme il faut que tu sélectionne le <li> qui a un <ul> en enfant.
je te met sur la piste : :has

Merci pour la piste, je m’y plonge direct après le sport

Alors je sent que je suis pas loin du tout, mais il y a quelque chose qui cloche hmmmhm

J'ai le chevron qui se place au bon endroit, mais ça efface le texte du <a> du coup je me retrouve avec le chevron seul, sans "Nos services"

<script>$('#menu-header > li').has ('ul').children().prev().html('<i class="fa fa-angle-down" aria-hidden="true"></i>');</script>

Modifié par Ploping (21 May 2019 - 22:43)

Salut


Autre solution :contains()

Si tu connais le text de ton lien tu peux faire un

$("a:contains('Mon text dans mon lien')").after("CE QUE JE VEUX");

Ah j'était parti sur le :has en CSS pour changer juste le sélecteur mais j'avais pas vu le support haha désolé.
Modifié par _laurent (22 May 2019 - 14:18)

Je vous remercies tous pour votre aide !