web-dev-qa-db-ja.com

最初の兄弟を選択

HTMLマークアップを変更できない環境で、jQueryを使用して、最初の兄弟の内部値を選択しようとしています。

私は以下を持っています：

_<tr>
    <td>3</td>
    <td>bob</td>
    <td>smith</td>
    <td>[email protected]</td>
    <td>
        <img src="bobsmith.png" onclick="doSomething()" />
    </td>
</tr>
_

最初の_<td>_の値を次のように取得しようとしています：

_function doSomething() {
    var temp = $(this).parent().parent().children().filter(':first');
    alert("you clicked person #" + temp.html());
}
_

これから得るすべてはnullです。

.siblings()関数を使用してさまざまな組み合わせを試しましたが、役に立ちませんでした。

何か案は？

おかげで、

注：抜粋のテーブルは動的にロードされ、ajax呼び出しから更新されることを忘れていました。これは、バインドを含む提案に適切な場合があります。

Solution：受け入れられた回答に触発されて、次のソリューションを実行しました：

_<tr>
    <td>3</td>
    <td>bob</td>
    <td>smith</td>
    <td>[email protected]</td>
    <td>
        <img src="bobsmith.png" onclick="doSomething(this)" />
    </td>
</tr>
_

そしてjQuery javascriptの場合：

_function startStopNode(el) {
    var temp = $(el).parent().siblings(':first').html();
    alert("you clicked: " + temp);
}
_
jqueryhtmldomsiblingsjquery-1.3.2
22
Mike
_$( 'td:first-child', $( this ).parents ( 'tr' ) ).html ();
_

これにより、画像の親TRの最初のTD要素（：first-childフィルター）が選択されます。parents()は要素のすべての親を返し、親をフィルターしますそのため、TR要素のみが返されます。

また、次のように画像を書き込んでみてください。

_<img src="bobsmith.png" onclick="doSomething(this)" />
_

そしてあなたの関数はそうです：

_function doSomething ( imgEl ) {
}
_

imgElの代わりにthisを使用します

17
Jan Hančič

JQueryを使用してイベントを設定しますが、それは完全にあなた次第です。

$("table td:last img").click(function() {
    var firstTd = $(this).parents("tr").find("td:first").html();
    alert("you clicked person #" + firstTd);
});

何があっても、独自のコードでこの例を引き続き使用できます。

function doSomething()
{
    var firstTd = $(this).parents("tr").find("td:first-child").html();
    alert("you clicked person #" + firstTd);
}

あなたが正しい。 'this'は渡されていません。これを機能させるには、htmlを編集する必要があります。または、上記のようにjQueryを代わりに使用します。

2
Kordonme
$('tr td:last-child img').click(function(){

    alert($('td:first-child',$(this).closest('tr')).text());

});
2
Reigel

多分これは誰かを助けるでしょう。これは記事全体のほんの一部です here 。

違い

これを使用して、イベントを処理しているHTML要素にアクセスする場合は、thisキーワードが実際にonclickプロパティに書き込まれていることを確認する必要があります。その場合にのみ、イベントハンドラーが登録されているHTML要素を参照します。だからあなたがするなら

element.onclick = doSomething;
alert(element.onclick)

あなたは得る

function doSomething()
{
    this.style.color = '#cc0000';
}

ご覧のとおり、thisキーワードはonclickメソッドにあります。したがって、HTML要素を指します。

でもそうするなら

<element onclick="doSomething()">
alert(element.onclick)

あなたは得る

function onclick()
{
    doSomething()
}

これは単にdoSomething（）関数への参照です。 thisキーワードはonclickメソッドには存在しないため、HTML要素を参照しません。

0
Reigel

1つの列がアクションであるテーブル行があり、他の列にはデータが含まれています。列の1つに製品コード（UPC）が含まれています。したがって、これを使用して、アクションボタンがクリックされるたびに製品コードを表示します。

var product_code = jQuery(obj).parents('tr').children('.upc').text();
alert('product code'+product_code);

テーブルセルには、行ごとに1919191911919などのクラスがあるため、これは機能します。

ただし、jQueryの他のセレクターを使用できます。セル19191919199191にid属性が設定されている場合は.children（ '＃myid'）のほか、同じ行の最初のセルを取得するために.children（td：first）などの他のセレクタをいくつでも設定できます。

0
Lance Cleveland