jQuery: Übergeordnetes tr für ausgewähltes Optionsfeld abrufen

Ich habe folgendes HTML:

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

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

    ....
</table>

Mit anderen Worten, ich habe eine Tabelle mit wenigen Zeilen, in jeder Zeile in der letzten Zelle habe ich ein Optionsfeld.
Wie kann ich die übergeordnete Zeile für das ausgewählte Optionsfeld abrufen?

Was ich versucht habe:

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

Aber es scheint, dass dieser Selektor falsch ist.

Versuche dies.

Sie müssen dem Attributnamen @im jQuery-Selektor kein Präfix voranstellen . Verwenden Sie die closest()Methode, um das nächstgelegene übergeordnete Element zu erhalten, das dem Selektor entspricht.

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

Sie können Ihre Methode so vereinfachen

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

closest() - Ruft das erste Element ab, das dem Selektor entspricht, beginnend mit dem aktuellen Element und fortlaufend durch den DOM-Baum.

Als Randnotiz sollten die IDs der Elemente auf der Seite eindeutig sein. Vermeiden Sie daher, dieselben IDs für Optionsfelder zu verwenden, die ich in Ihrem Markup sehen kann. Wenn Sie die IDs nicht verwenden möchten, entfernen Sie sie einfach aus dem Markup.

Antworten

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

Wie finde ich die nächste Reihe?

Verwenden von .closest():

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

Verwenden von .parent():

Überprüfen Sie diese .parent()Methode. Dies ist eine Alternative zu a .prev()und .next().

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

Holen Sie sich alle Tabellenzelle <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>
});

DEMO ANZEIGEN

Nur spezifisch erhalten <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>
});

DEMO ANZEIGEN

Nützliche Methoden

• .closest() - Holen Sie sich das erste Element, das dem Selektor entspricht
• .parent() - Holen Sie sich das übergeordnete Element jedes Elements in den aktuellen Satz übereinstimmender Elemente
• .parents() - Holen Sie sich die Vorfahren jedes Elements in den aktuellen Satz übereinstimmender Elemente
• .children() - Holen Sie sich die untergeordneten Elemente jedes Elements in den Satz übereinstimmender Elemente
• .siblings() - Holen Sie sich die Geschwister jedes Elements in den Satz der übereinstimmenden Elemente
• .find() - Holen Sie sich die Nachkommen jedes Elements in den aktuellen Satz übereinstimmender Elemente
• .next() - Holen Sie sich das unmittelbar folgende Geschwister jedes Elements aus dem Satz übereinstimmender Elemente
• .prev() - Holen Sie sich das unmittelbar vorhergehende Geschwister jedes Elements aus dem Satz übereinstimmender Elemente