{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, il y a un problème avec le code HTML qui n'est pas valide (et sera modifié dans le dom), tu veux sûrement dire ceci? :

<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 - !}
            <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>
        <li><a href="#">titre menu 9</a></li>

    </ul>
</nav>

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>');  

Bonsoir kustolovic, Bonsoir aliasdmc, je n'ai pas pris le temps de regarder la différence entre ton code et le mien, j'ai sans doute dû faire une faute lors du copier coller + remise en forme pour rendre le code lisible sur se topic.

Nickel aliasdmc, tu m'as mis sur la voie ! j'ai essayé tes deux codes, à chaque fois ça me mettais le au mauvaise endroit, mais en faisant un mix entre ton code et le mien, j'ai réussi à obtenir ce que je voulais ! :

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

l'union fait la force

AHHHHA en fait, non
Modifié par Ploping (21 May 2019 - 13:47)

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>');

Le problème avec « li:nth-child(3)» c’est que si le client potentiel ajoute un élément dans le menu via le back-office, par exemple « nos testimonial » ; le code jquery n’est plus valide hmmm
Modifié par Ploping (21 May 2019 - 17:28)

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)

bonsoir,

tu devrais prendre le temps de tout lire
a - la structure HTML ,ul ou ol (liste) ne peut avoir que des li (item) comme enfant). Une liste imbriqué s'imbrique dans l'un des items de la liste parente. suggestion de kustolovic . (un code HTML valide, permet d'y appliquer surement un selecteurr on du js )

b- .append() au lieu de .html() ou .after() (conseil de _laurent)

et ça marche : https://codepen.io/anon/pen/oRoPpG et sur n'importe quel niveau d'imbrication : https://codepen.io/anon/pen/OYOoWo

Cdt,

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 !

l'utilisation de jQuery sélectionne l'élément div avec un arrière-plan noir, puis insère le contenu à l'intérieur (préfixer, à la fin de l'ajout) et avant (avant) après (après)