Q&A
ありがとうございますm(__)m
先祖要素の理解が誤っていました。
jQueryで、ボタンをクリックすると、当該ボタンと同じtrタグにあるtd.nameタグの中のtextをアラート表示させるプログラムを書いていますが、うまくいきません。
html
1<head> 2<script src="https://code.jquery.com/jquery-2.1.4.js"></script> 3<script> 4$(function(){ 5 $('button.delete').on("click",function(){ 6 alert($(this).closest('tr').html()); /*①*/ 7 alert($(this).closest('td.name').text()); /*②*/ 8 alert($(this).closest('tr td.name').text()); /*③*/ 9 }) 10}) 11</script> 12</head> 13<body> 14<table> 15 <tr> 16 <td class="id" >1</td> 17 <td class="name">A</td> 18 <td><button class="btn-default delete">ボタン１</button></td> 19 </tr> 20 <tr> 21 <td class="id" >2</td> 22 <td class="name">B</td> 23 <td><button class="btn-default delete">ボタン２</button></td> 24 </tr> 25</table> 26</body>
つまり、ボタン１をクリックすると「A」というアラートが出て、ボタン2をクリックすると「B」というアラートが出るようにしたいです。
私は、テストのために、上記のとおり、ボタンをクリック後のイベントハンドラーに3つのアラートを用意してみました。
私の当初の予想では、
javascript
1alert($(this).closest('td.name').text()); /*②*/ 2alert($(this).closest('tr td.name').text()); /*③*/
のどちらでもうまく動くのかと思いましたが、実際にやってみると、
アラートは出るのですが、何も記載のないアラートでした。
ちなみに、
javascript
1alert($(this).closest('tr').html()); /*①*/
は、
<td class="id" >1</td> <td class="name">A</td> <td><button class="btn-default delete">ボタン１</button></td> とアラート表示され、これは私の予想どおりの動きでした。私のセレクタに対する理解に誤りがあるのだと思います。
お分かりの方、ご教示頂ければ幸いです。
よろしくお願いいたします。
回答3件
0
jsdoit 上で書いてみました。
javascript
1$(function(){ 2 $('button.delete').on("click",function(){ 3 node = $(this).parents().parents().children(".name"); 4 alert($(node).text()); 5 }) 6})
投稿2015/12/06 08:47
総合スコア22328
0
closestは最も近い先祖要素を取得する。
該当要素は親(parent)要素の兄弟(sibling)要素なので先祖ではない。
Javascript
1alert($(this).parent().prev().text());
投稿2015/12/06 08:00
総合スコア144
0
ベストアンサー
リファレンスによると、
開始要素から最も近い親要素を選択します。引数にセレクター書式を指定した場合、マッチする最も近い親要素を返します。
とのことですので、ボタンの親要素から、'td.name' 'tr td.name' にマッチする要素を探しますが、親にはないですよね。
下記のように、親要素から、children で子要素を探すせばいいでしょう。
javascript
1$(function(){ 2 $('button.delete').on("click",function(){ 3 alert($(this).closest('tr').html()); /*①*/ 4 alert($(this).closest('tr').children("td.name").text()); /*③*/ 5 }) 6})
投稿2015/12/06 07:58
総合スコア34362
ありがとうございました。
ご指摘の方法でうまくいきました。
いったん親を見つけて、その子の中から探すという発想でやれば良いのですね。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2015/12/06 09:24
2015/12/06 09:32