1

次の形式の単純なテーブルがあります。

 <table>
 :
 <tr class="main" id="row1"><td><a href="#" class="showstuff">Assignment 1</a></td></tr>
 <tr class="detail hide"><td>... detail about Assignment 1...</td></tr>
 <tr class="main" id="row2"><td><a href="#" class="showstuff">Assignment 2</a></td></tr>
 <tr class="detail hide"><td>... detail about Assignment 2...</td></tr>
 :
 </table>

クリックした割り当てに関連付けられた詳細を表示したいのですが、次の行を選択するには $(this).parent().next() という形式が必要だと理解しています。ただし、現在の行を選択できません。問題をデバッグしようとして、現在の行の ID を取得しようとしましたが、「未定義」が返されるだけです。私のコードは次のとおりです。

$(document).ready(function(){
   $(document).on("click",'a.showstuff',function(){toggleDetail();return false;});
});
function toggleDetail(){
 var abc = $(this).parent().attr('id');
 console.log(abc)
};

私のアプローチの穴はどこですか？

ありがとう/B

4

2 に答える 2

2

.parent()直接の親要素 (つまり、1 レベル上) のみに一致します。ハンドラーをa要素 ( のさらに下にネストされているtd) にバインドしているため、代わりに次のように使用する必要があります.closest()(最初の一致まで DOM ツリー全体を「バブルアップ」します)。

$(this).closest('tr').attr('id');

のドキュメントを読んで、.closest()チェック.parent()アウトしてください.parents()

編集：

コードの 2 つ目の問題は、ハンドラー内からメソッドを呼び出すと、イベント ハンドラーのコンテキストが失われることですtoggleDetail()。メソッドのコンテンツをハンドラー内に移動します。

$(document).on('click', 'a.showstuff', function(){
  console.log($(this).closest('tr').attr('id'));
  return false;
});

または要素を渡します：

$(document).on('click', 'a.showstuff', function(){
  toggleDetail(this);
  return false;
});

function toggleDetail(el){
  console.log($(el).closest('tr').attr('id'));
}
于 2013-06-23T11:32:10.317 に答える
0

atagの親要素は、属性tdを指定していない要素です。idしたがって、結果はundefinedです。あなたは実際に2レベル上の要素に与えidました。tr実際には次のことを行う必要があります。

$(this).parent().parent().attr('id');
于 2013-06-23T11:37:30.967 に答える