[jQuery] - Selectionner les enfants d'un élément cliqué.

Laznet
Javascript

Bonsoir,

Comme l'indique le titre, j'aimerais savoir comment faire pour selectionner les enfants d'un éléments cliqué.
"mes enfants" ont tous la même class. et "mes parents" ont chacun un id différents.
J'aimerais pouvoir selectionner les enfants du parent A et que le code n'affecte que ces enfants là.

<div class="menu">
        <span id="menu_link"> Accueil </span>
        <span id="menu_link1"> Design d'Espace </span>
            <span class="submenu_link">TEST</span>
            <span class="submenu_link">TEST</span>
            <span class="submenu_link">TEST</span>
        <span id="menu_link2"> Design produit </span>
            <span class="submenu_link">TEST</span>
            <span class="submenu_link">TEST</span>
            <span class="submenu_link">TEST</span>
        <span id="menu_link3"> Design Graphique </span>
        <span id="menu_link4">Arts de l'image et du son</span>
    </div>

J'aimerais par exemple selectionner les enfants de Design d'Espace et pouvoir les mannipuler avec du code..
Mais que ça n'affecte pas les enfants de Design produit etc...

J'ai fais quelque recherche.. J'ai testé avec find() et également avec childreen() mais ça ne fonctionne pas. Il ne se passe rien.

5 réponses

Ramzz1994
Réponse acceptée

Le mieux serait que tu utilises ce genre de structure (pas forcément des ul et li, mais imbriqué).

<ul>
    <li>
        <a href="#">Menu 1</a>
        <ul>
            <li><a href="#">Sous menu 1</a></li>
            <li><a href="#">Sous menu 2</a></li>
            <li><a href="#">Sous menu 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 2</a>
        <ul>
            <li><a href="#">Sous menu 1</a></li>
            <li><a href="#">Sous menu 2</a></li>
            <li><a href="#">Sous menu 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 3</a>
        <ul>
            <li><a href="#">Sous menu 1</a></li>
            <li><a href="#">Sous menu 2</a></li>
            <li><a href="#">Sous menu 3</a></li>
        </ul>
    </li>
<ul>

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>

<script type="text/javascript">

    $(document).ready(function () {

        $('a').click(function () {
            // Tu auras tous les <li>, peut-être que tu avais juste besoin du <ul>, 
            // ou même que tu as besoin des <a>, je te laisse poursuivre !
            var elementsEnfants = $(this).parent().children('ul').children('li');

            if (elementsEnfants.length > 0) {
                console.log(elementsEnfants);
            }
            else {
                console.log('Le bouton n\'a pas d\'éléments enfants.');
            }
        });

    });

</script>

Tu pourrais peut-être penser à une solution avec les éléments ayant des références sur d'autres éléments, tu pourrais utiliser des attributs (data-*). Si je reprend ta structure...

<div class="menu">
    <span class="menu_link" id="menu_link"> Accueil </span>

    <span class="menu_link" id="menu_link1"> Design d'Espace </span>
    <span class="submenu_link" data-parent="menu_link1">TEST</span>
    <span class="submenu_link" data-parent="menu_link1">TEST</span>
    <span class="submenu_link" data-parent="menu_link1">TEST</span>

    <span class="menu_link" id="menu_link2"> Design produit </span>
    <span class="submenu_link" data-parent="menu_link2">TEST</span>
    <span class="submenu_link" data-parent="menu_link2">TEST</span>
    <span class="submenu_link" data-parent="menu_link2">TEST</span>

    <span class="menu_link" id="menu_link3"> Design Graphique </span>
    <span class="menu_link" id="menu_link4">Arts de l'image et du son</span>
</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>

<script type="text/javascript">

    $(document).ready(function () {

        $('.menu .menu_link').click(function () {
            var elementsEnfants = $('.submenu_link[data-parent="' + $(this).attr('id') + '"]');

            if (elementsEnfants.length > 0) {
                console.log(elementsEnfants);
            }
            else {
                console.log('Le bouton n\'a aucun elements enfants.');
            }
        });

    });

</script>
Huggy
Réponse acceptée

Je rejoins @Ramzz1994, il serait mieux de créer une imbrication du genre ul / li
si malgré tout tu souhaites garder ta structure, voici ce que j'ai testé :

$(document).ready(function () {
    $("span.menu_link").click(function(){
        //alert($(this).text());
        // A B cible B qui est enfant de A
        // A * cible tous les enfants de A quelque soit le type 
        // A + B  cible B qui est le premier frère direct à droite de A (droite)
        // A ~ B  cible les freres de A à droite même en sautant des element différents 
        $(this).find('+ .submenu_link').each(function(){
            var $x = $(this);
            while ($x !== undefined) {
                $($x).css('color','red');
                $x = $($x).find('+ .submenu_link')[0];
            }
        });
    });
});

j'ai supposé comme @Ramzz1994 que les menus avaient la classe 'menu_link'
le principe c'est de cibler le premier sous-menu à droite puis de faire une boucle pour trouver son premier sous-menu ...

Huggy

Je ne sais pas ce que tu as essayé de faire mais children devrait fonctionner.
Children te renvoie un tableau, il faut utiliser each pour parcourir ce tableau

$('#menu_link1').children('span').each(function() {  console.log($(this).text() )})
Laznet
Auteur

Bonsoir,

Huggy j'ai testé ton code. Et il ne se passe rien dans la console.

Mon code

$(document).ready(function () {
    $("#menu_link1").click(function(){
        $('#menu_link1').children('span').each(function() {  console.log($(this).text("test") )})
    });
});
Huggy

Oui forcément les sous-menus ne sont pas des enfants des menus
c'est l'indentation qui m'a induit en erreur