jQuery: sélection de la première instance d'un élément qui se produit après un autre élément spécifié

Question

En utilisant cet exemple simplifié, supposons que j'ai une table contenant des boutons radio suivie d'un élément div avec un lien. Ce modèle est ensuite répété un nombre inconnu de fois comme ceci:

<table class="rdoBtnList"> 
    <tbody> 
     <tr> 
      <td> Person 1 </td> 
      <td> 
      <label for="rb1">Verified</label> 
      <input type="radio" id="rb1" name="rdoBtns" value="Verified" /> 
      <label for="rb2">Not Verified</label> 
      <input type="radio" id="rb2" name="rdoBtns" value="NotVerified" /> 
      </td> 
     </tr> 
    </tbody> 
</table> 
<div class="PersonLink"><a href="#">Link to Person 1 page</a></div> 
    ..... tables and divs for person 2, 3, ... n, etc 

Je voudrais pouvoir utiliser jQuery pour activer/désactiver le lien dans la div suivant les boutons radio en fonction de la valeur du bouton radio . Je peux obtenir la valeur des boutons radio, mais ne peux pas comprendre quelle syntaxe de sélecteur je voudrais utiliser pour activer/désactiver juste le div après les boutons radio.

Voici mon jQuery jusqu'à présent:

<script type="text/javascript"> 
     $(document).ready(function() { 
      $(".rdoBtnList > tbody > tr > td > input").change(function() { 
      if ($(this).val() == "Verified") { 
       // select the link in the div following the table and enable it 
      } else { 
       // select the link in the div following the table and disable it 
      } 
     }); 
     }); 
    </script> 

Answer 1

Comme ceci:

$(this).closest('.rdoBtnList').nextAll('.PersonLink:first').children('a').whatever 

closest('.rdoBtnList') trouverez la table, et nextAll('.PersonLink:first') trouvera la première .PersonLink après la table. Par ailleurs, la fonction val renvoie un booléen normal. Vous devriez écrire if($(this).val()).

Answer 2

j'aurais essayé une approche différente, donnant chaque lien un identifiant, ou peut-être même une classe pour la sélection plus facile:

<table>... 
    <input type="radio" id="personXrb1" class="personXselector" ... 
<div> 
<a href="personXlink" id="personXselector">link to person X</a> 

Cela devrait être relativement facile que j'attends le code HTML est généré par le programme. Droite? Il sera également moins sujet aux erreurs dues aux changements de code, et peut-être plus facile à lire.

sélection ne serait alors pas fait avec $ (ce) .closest etc, ce qui est pas garanti après avoir changé le code autour, mais par

$('#' + $(this).attr('class')).doStuff(); 

Je suis également pas sûr activer/disable fonctionnera avec un div ou un tag, vous feriez mieux d'utiliser fadeOut() et fadeIn() ou juste show() et hide() pour "désactiver" les liens.