Page 1 sur 1

Sélecteur Jquery

Posté : 24 juin 2019, 21:49
par parfait
Bonjour, j'explique ma situation :
<table>
     <thead>
          ...
     </thead>

     <tbody>
          <tr class="tabs">
                <td>...</td>
                <td>...</td>
                <td>...</td>
                <td>...</td>
                <td><span><i>juste pour une icon</i></span></td>

                <tr>
                     <td>...</td>
                     <td class="commentaires">
                         <table>
                         </table>
                    </td>
                </tr>

          </tr>
     </tbody>
</table>
Là c'est la structure du code HTML que j'ai.
Je cherche à cherche à détecter le click sur le <span></span> et agir sur le tr.commentaires (l'afficher et le masqué).

Normalement c'est facil mais le souci ici c'est que les tableaux sont générés de façon dynamique donc je ne peux juste pas utiliser les "id" comme d'habitude.

S'il vous plaît comment je peux faire cela ?

Re: Sélecteur Jquery

Posté : 24 juin 2019, 23:27
par @rthur
La question que tu dois te poser c'est comment tu sais de quel span en particulier tu attends le clic pour déclencher une action.

Si c'est tous les span de ta page, alors tu as juste à utiliser "span" comme sélecteur.
Si c'est un span compris dans un td, alors c'est "td > span"
Si c'est un span compris dans un td lui même compris dans un tr dont la class est tabs, alors le selecteur est

Code : Tout sélectionner

tr[class="tabs"] > td > span


A adapter donc en fonction de ce que tu veux faire.

La liste des sélecteurs jquery est dispo ici :
https://api.jquery.com/category/selectors/

Re: Sélecteur Jquery

Posté : 25 juin 2019, 00:16
par parfait
Bonsoir, merci déjà pour ta réponse ! Suis pas trop expert en jQuery, je fais mes tests en Je pure.
J'ai ajouté une classe "clickToSlide" aux span qui déclenchent les actions.

Code : Tout sélectionner

var span = document.querySelector('span.clickToSlide') span.addEventListener('click', function(e) { var parent = this.parentNode.parentNode //Là j'obtiens bien le tr parents console.log(parent.childNodes)
Mais là je ne comprends pas pourquoi dans la liste des enfants il y a pas le "tr" que je veux sélectionner.

Re: Sélecteur Jquery

Posté : 25 juin 2019, 00:21
par parfait
Le span qui déclenchent l'action c'est :

Code : Tout sélectionner

td > span.clickToSlide

Re: Sélecteur Jquery

Posté : 25 juin 2019, 01:13
par parfait
Là je crois que je ne comprends pas pourquoi "tr" que je veux sélectionner n'est pas enfant mais plutôt frère puisque quand je fais :

Code : Tout sélectionner

$( 'td > span.clickToSlide').on('click', function (e) { var $a = $(this) $a.parent().parent().next().addClass('active)
Ça fonctionne bizarrement.
Quelqu'un pour m'expliquer s'il vous plaît.