web-dev-qa-db-ja.com

jQuery-クリックされた要素と同じ行にあるテーブルセルのテキスト値を取得する

テーブルセルのリンクをクリックします。この同じテーブル行内の特定のセルの値を取得する必要があります。

<tr>
    <td class="one">this</td>
    <td class="two">that</td>
    <td class="three">here</td>
    <td class="four"><a href="#">there</a></td>
</tr>
<tr>
    <td class="one">qwqw</td>
    <td class="two">dfgh</td>
    <td class="three">ui</td>
<td class="four"><a href="#">there</a></td>
</tr>

4番目のセルのリンクにクリックハンドラーを接続しています。そのクリックハンドラーは、モーダルウィンドウを開く関数を呼び出します。モーダルのフォームが送信されると、リンクがクリックされた行からこのモーダルにtd class = "two"の値も渡します。

モーダルを送信する関数を次に示します（問題領域はvar Somethingの正しい値を取得しています）。

var Send = function() {
    var Name = $( '#name' ).val();
    var Something = $(this).closest('td').siblings('.two').text(); // version 1. doesn't work
    var Something = $(this).closest('tr').siblings('td.two').text(); // version 2 also doesn't work
    var Something = $(this).attr('class'); // version 3. just a test but also doesn't work
    $.ajax( {
        async: false,
        data: { name: Name, somedata: Something },
        type: 'POST',
        url: the url
    });        
};

問題は、Somethingの正しい値を取得できないことです。クリックされた要素と同じ行のtd class = twoの値でなければなりません。

これをすべてまとめる方法があります。 Send_Click（）というメソッドを呼び出すターゲットリンクをクリックします。 Send_Clickはいくつかの検証を行った後、Send（）を呼び出しますが、Somethingの値は入力されません。これは、thisが私が考えているものではないからですか？ヘルプ！

jqueryjquery-selectors
47
rg88

代わりに.children()が必要です（ documentation here ）：

$(this).closest('tr').children('td.two').text();
82
Nick Craver

ニックは正しい答えを持っていますが、クラス名を必要とせずにセルデータを取得することもできます

_var Something = $(this).closest('tr').find('td:eq(1)').text();
_

:eq(#)にはゼロベースのインデックスがあります（ link ）。

63
Mottie

それはうまくいくはずです：

var Something = $(this).children("td:nth-child(n)").text();
5
hhhqsun

したがって、parent（）を使用して親trに到達し、次にfindを使用してクラス2のtdを収集できます。

var Something = $（this）.parent（）。find（ "。two"）。html（）;

または

var Something = $（this）.parent（）。parent（）。find（ "。two"）。html（）;

tr行に従ってクリックされたオブジェクトの深さをparent（）と同じくらい使用します

これがうまくいくことを願っています...

4
Yasin Ergul

これも機能します

$(this).parent().parent().find('td').text()
4
Anna.P