22

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

私は次のものを持っています：

<tr>
    <td>3</td>
    <td>bob</td>
    <td>smith</td>
    <td>bob@example.com</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 呼び出しから動的にロードおよび更新されることを忘れていました。これは、バインドを含む提案に関連する場合があります。

解決策： 受け入れられた回答に触発されて、次の解決策を採用しました：

<tr>
    <td>3</td>
    <td>bob</td>
    <td>smith</td>
    <td>bob@example.com</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);
}
4

6 に答える 6

17 
$( '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

于 2010-01-27T11:06:35.310 に答える
2

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 を使用してください。

于 2010-01-27T11:13:07.680 に答える
2 
$('tr td:last-child img').click(function(){

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

});
于 2010-01-27T11:08:17.863 に答える
0

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) のような任意の数の他のセレクターがあります。

于 2012-04-21T16:00:40.287 に答える
0

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

違い

イベントを処理する 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 要素を参照しません。

于 2010-01-27T13:21:24.860 に答える