web-dev-qa-db-ja.com

jQuery：選択したラジオボタンの親trを取得

次の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>

つまり、数行のテーブルがあり、最後のセルの各行にラジオボタンがあります。
選択したラジオボタンの親行を取得するにはどうすればよいですか？

私が試したもの：

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

しかし、このセレクタは間違っているようです。

jqueryjquery-selectorsparenttablerow
60
Andriy Khrystyanovich

これを試して。

JQueryセレクターで属性名の前に@を付ける必要はありません。 closest()メソッドを使用して、セレクタに一致する最も近い親要素を取得します。

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

このようにメソッドを簡素化できます

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

closest()-セレクターに一致する最初の要素を取得します。現在の要素から始まり、DOMツリーを上に向かって進みます。

補足として、要素のIDはページ上で一意である必要があるため、マークアップで確認できるラジオボタンに同じIDを使用しないようにしてください。 IDを使用しない場合は、マークアップから削除するだけです。

155
ShankarSangoli

回答

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

最も近い行を見つける方法は？

.closest()を使用：

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

.parent()を使用：

これを確認してください .parent() メソッド。これは、.prev()および.next()の代替です。

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

すべてのテーブルセルを取得<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>
});

デモを見る

特定のみを取得<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>
});

デモを見る

便利な方法

  • .closest() -セレクターに一致する最初の要素を取得する
  • .parent() -一致した要素の現在のセット内の各要素の親を取得します
  • .parents() -一致した要素の現在のセット内の各要素の祖先を取得します
  • .children() -一致した要素のセット内の各要素の子を取得します
  • .siblings() -一致した要素のセット内の各要素の兄弟を取得します
  • .find() -一致した要素の現在のセット内の各要素の子孫を取得します
  • .next() -一致した要素のセット内の各要素の直後の兄弟を取得します
  • .prev() -一致した要素のセット内の各要素の直前の兄弟を取得します
53
Jay Patel