jQueryで、ボタンをクリックすると、同じtrタグにあるtｄ要素のtextをアラート表示したい。

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件

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

katoy

総合スコア22324

退会済みユーザー

2015/12/06 09:24

ありがとうございます。 jsdo.itって、わかりやすく伝えられていいサービスですね。

katoy

2015/12/06 09:32

質問者がソースコードを質問文にはりつけ、回答者が、それを cut & past して、編集して動作チェックして、編集結果を回答になりつけて.... というのは、無駄が多すぎる。質問も回答も、はじめから jdodit や github みたいなものの上にソースコードを書けばよいと思います。編集履歴、編集内容、動作のチェックが簡単できないと、回答内容がそれなりに正しいかもすぐに分からないし、変更点の追跡もしにくいし ...

行動規範の内容に同意します

closestは最も近い先祖要素を取得する。
該当要素は親(parent)要素の兄弟(sibling)要素なので先祖ではない。

Javascript
1alert($(this).parent().prev().text());

投稿2015/12/06 08:00

nage

総合スコア144

退会済みユーザー

2015/12/06 08:03

ありがとうございますm(__)m 先祖要素の理解が誤っていました。

行動規範の内容に同意します

ベストアンサー

リファレンスによると、

開始要素から最も近い親要素を選択します。引数にセレクター書式を指定した場合、マッチする最も近い親要素を返します。

とのことですので、ボタンの親要素から、'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})