web-dev-qa-db-fra.com

jQuery: obtient le parent tr pour le bouton radio sélectionné

J'ai le code HTML suivant:

<table id="MwDataList" class="data" width="100%" cellspacing="10px">
    ....

    <td class="centerText" style="height: 56px;">
        <input id="selectRadioButton" type="radio" name="selectRadioGroup">
    </td>

    ....
</table>

En d'autres termes, j'ai un tableau avec quelques lignes, dans chaque ligne de la dernière cellule, j'ai un bouton radio.
Comment puis-je obtenir parent rangée du bouton radio sélectionné?

Ce que j'ai essayé

function getSelectedRowGuid() {
    var row = $("#MwDataList > input:radio[@name=selectRadioGroup]:checked :parent tr");
    var guid = GetRowGuid(row);
    return guid;
}

Mais il semble que ce sélecteur est incorrect.

jqueryjquery-selectorsparenttablerow
60
Andriy Khrystyanovich

Essaye ça.

Vous n'avez pas besoin de préfixer le nom de l'attribut par @ Dans le sélecteur jQuery. Utilisez la méthode closest() pour obtenir l'élément parent le plus proche correspondant au sélecteur.

$("#MwDataList input[name=selectRadioGroup]:checked").closest('tr');

Vous pouvez simplifier votre méthode comme ceci

function getSelectedRowGuid() {
    return GetRowGuid(
      $("#MwDataList > input:radio[@name=selectRadioGroup]:checked :parent tr"));
}

closest() - Obtient le premier élément qui correspond au sélecteur, en commençant par l'élément actuel et en progressant dans l'arborescence DOM.

En remarque, les identifiants des éléments doivent être uniques sur la page. Par conséquent, évitez d’avoir les mêmes identifiants pour les boutons radio que je peux voir dans votre balisage. Si vous n'utilisez pas les identifiants, supprimez-les simplement du balisage.

155
ShankarSangoli

Répondre

$("#MwDataList input[name=selectRadioGroup]:checked").closest('tr');

Comment trouver la rangée la plus proche?

Utilisation de .closest(): 

var $row = $(this).closest("tr");

Utilisation de .parent():

Vérifiez cette méthode .parent() . Ceci est une alternative à .prev() et .next().

var $row = $(this).parent()             // Moves up from <button> to <td>
                  .parent();            // Moves up from <td> to <tr>

Obtenir toutes les cellules de la table <td>

var $row = $(this).closest("tr"),       // Finds the closest row <tr> 
    $tds = $row.find("td");             // Finds all children <td> elements

$.each($tds, function() {               // Visits every single <td> element
    console.log($(this).text());        // Prints out the text within the <td>
});

VOIR LA DÉMO

Obtenir uniquement spécifique <td>

var $row = $(this).closest("tr"),        // Finds the closest row <tr> 
    $tds = $row.find("td:nth-child(2)"); // Finds the 2nd <td> element

$.each($tds, function() {                // Visits every single <td> element
    console.log($(this).text());         // Prints out the text within the <td>
});

VOIR LA DÉMO

Méthodes utiles

  • .closest() - Récupère le premier élément qui correspond au sélecteur
  • .parent() - Récupère le parent de chaque élément de l'ensemble actuel des éléments correspondants
  • .parents() - Récupère les ancêtres de chaque élément de l'ensemble actuel d'éléments correspondants
  • .children() - Récupère les enfants de chaque élément dans l'ensemble des éléments correspondants
  • .siblings() - Récupère les frères et soeurs de chaque élément dans l'ensemble des éléments correspondants
  • .find() - Récupère les descendants de chaque élément de l'ensemble actuel d'éléments correspondants
  • .next() - Récupère le frère immédiatement suivant de chaque élément de l'ensemble des éléments correspondants
  • .prev() - Récupère le frère immédiatement précédent de chaque élément de l'ensemble des éléments correspondants
53
Jay Patel