4

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

  <table id="objects">
    <tr>
        <td>
            <input type="text" value="2" />
        </td>
        <td>
            <a href="#" class="delete">link</a>
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" value="4" />
        </td>
        <td>
            <a href="#" class="delete">link</a>
        </td>
    </tr>    
  </table>

アンカータグをクリックする<input>と、リンクに最も近いものを選択して、その値を取得します。これどうやってするの ？やってみた ：

  $('.delete').click(function(e){
    e.preventDefault();
    var val = $(this).closest('input').attr('value');
    alert(val);
  });

しかし運がなかった。

4

4 に答える 4

4

ドキュメントを最も近いもので見ると、祖先が見つかったと書かれていることがわかります。

説明：セレクターに一致する最初の祖先 要素を取得します。現在の要素から始まり、DOMツリーを上っていきます。

.deleteあなたの場合の入力は、リンクの祖先ではありません。

で上に移動して.closest('tr')からドリルダウンして、入力を見つける必要があります。.find('input')

それで

var val = $(this).closest('tr').find('input').val();
于 2010-11-01T11:00:35.187 に答える
3

関数の名前closestは非常に誤解を招く可能性があります。実際に返されるのは、最も近い祖先です。

正しいコードは次のとおりです。

var value = $(this).parent().siblings('td').children('input').val();

イベントハンドラーをallllllllllアンカータグにバインドすることはお勧めしません。ページにこれらの要素が多数ある場合、これは非効率的です。代わりに、 delegate（）またはlive（）を使用することを強くお勧めします。

$('#objects').delegate('a.delete', 'click', function (e) {
    e.preventDefault();
    var val = $(this).parent('td').siblings('td').find('input').attr('value');
    alert(val);
});

これにより、イベントハンドラーが（1回）にバインドされ、tableJavaScriptのイベントバブリングメカニズムを使用して、最初の引数で渡されたセレクター（この場合は削除ボタン）に一致する要素のクリックが検出されます。

于 2010-11-01T11:02:06.093 に答える
0

試す

$('.delete').click(function (e) {
    e.preventDefault();
    var val = $(this).parent("td").prev().find('input').val();
    alert(val);
});
于 2010-11-01T10:55:56.843 に答える
0

作業デモを参照してください

そこでは使用できませんclosest。これを試してください。

 $('.delete').click(function(e){
    e.preventDefault();
    var val = $(this).parent('td').prev('td').find('input').attr('value');
    alert(val);
 });

は、リンクのparent()親に戻るために使用され、次にの前の兄弟を見つけるために使用され、最後にメソッドを使用して検索されます。tdprev()tdfindinput

より詳しい情報：

于 2010-11-01T10:55:57.960 に答える