jQuery: Holen Sie sich das übergeordnete tr für das ausgewählte Optionsfeld

Lesezeit: 3 Minuten

Benutzer-Avatar
Andriy Chrystyanovich

Ich habe folgenden HTML-Code:

<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 bekomme ich Elternteil Zeile für ausgewähltes Optionsfeld?

Was ich probiert habe:

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

Aber es scheint, als ob dieser Selektor falsch ist.

Benutzer-Avatar
ShankarSangoli

Versuche dies.

Sie müssen dem Attributnamen kein Präfix voranstellen @ im jQuery-Selektor. Verwenden closest() -Methode, um das nächste ü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 mit dem Selektor übereinstimmt, beginnend mit dem aktuellen Element und nach oben durch die DOM-Struktur.

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

  • Schlagen Sie mich dazu. Hier ist die Dokumentation für next() api.jquery.com/closest

    – David

    16. Februar 2012 um 16:23 Uhr

Benutzer-Avatar
Jaykumar Patel

Antworten

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

Wie finde ich die nächste Reihe?

Verwenden .closest():

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

Verwenden .parent():

Überprüfen Sie dies .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 Tabellenzellen <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 ANSEHEN


Holen Sie sich nur bestimmte <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 ANSEHEN


Nützliche Methoden

  • .closest() – Holen Sie sich das erste Element, das mit dem Selektor übereinstimmt
  • .parent() – Holen Sie sich das übergeordnete Element jedes Elements in der aktuellen Menge übereinstimmender Elemente
  • .parents() – Holen Sie sich die Vorfahren jedes Elements in der aktuellen Menge von übereinstimmenden Elementen
  • .children() – Holen Sie sich die Kinder jedes Elements in der Menge der übereinstimmenden Elemente
  • .siblings() – Holen Sie sich die Geschwister jedes Elements in der Menge der übereinstimmenden Elemente
  • .find() – Abrufen der Nachkommen jedes Elements in der aktuellen Menge übereinstimmender Elemente
  • .next() – Holen Sie sich das unmittelbar folgende Geschwister jedes Elements in der Menge der übereinstimmenden Elemente
  • .prev() – Holen Sie sich das unmittelbar vorangehende Geschwister jedes Elements in der Menge der übereinstimmenden Elemente

1304360cookie-checkjQuery: Holen Sie sich das übergeordnete tr für das ausgewählte Optionsfeld

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy