jquery recherche span adjacente dans la table basée sur la valeur

Question

Lorsque ma page se charge, je vais utiliser un asp:DataGrid pour frapper la base de données et remplir certaines données cachées dans ma page. Lorsque l'utilisateur sélectionne une valeur dans une liste déroulante, je veux utiliser jquery pour trouver la valeur correspondante dans la table et retourner la valeur de l'intervalle de taux de fratrie. Ainsi, par exemple, si la valeur déroulante sélectionnée était 10, 80,00 serait renvoyé. Si 30 était sélectionné, 45,00 seraient renvoyés. Voici un exemple du code HTML généré.

<table id="PercentGrid" cellspacing="0" border="1" style="border-collapse: collapse;"> 
    <tbody> 
    <tr> 
     <td> 
     <span id="Value">10</span> 
     <span id="Rate">80.00</span> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <span id="Span1">20</span> 
     <span id="Span2">75.00</span> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <span id="Span3">30</span> 
     <span id="Span4">45.00</span> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <span id="Span5">40</span> 
     <span id="Span6">100.00</span> 
     </td> 
    </tr> 
    </tbody> 
</table> 

Désolé, il s'agit d'une question en double ou quasi-dupliquée. Je suis assez nouveau à jquery, et ai également fait quelques recherches autour mais n'ai rien trouvé tout à fait raison. Merci!

Answer 1

Si vous modifiez votre code pour générer des portées comme ceci:

<span id="Rate30">45</span> 

Ensuite, vous pouvez simplement faire ceci:

$("#Rate" + $ddl.val()).text(); 

Où $ddl est votre liste déroulante.

Answer 2

Vous pouvez utiliser la fonction jQuery .next().

//iterate over each span to find the one that has the proper value 
var valueSpan = $('#PercentGrid').find('span').each(function() { 
    if ($(this).innerHtml() === value) return $(this); 
}) 
alert($(valueSpan).next().innerHtml());;