[RESOLU] Sélecteur Jquery

24 juin 2019, 21:49

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 ?

24 juin 2019, 23:27

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/

25 juin 2019, 00:16

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.

25 juin 2019, 00:21

Le span qui déclenchent l'action c'est :

Code : Tout sélectionner

td > span.clickToSlide

25 juin 2019, 01:13

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.

[RESOLU] Sélecteur Jquery

Qui est en ligne