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;
}

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

60

これを試して。

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