jQuery。テーブル内の各機能が動作しない

Question

"Deltree" divにある各機能を取得しようとしていますが、各divの.attr('class')を選択し、その値を通知しますが、最初のものdeltree divのここに私のテーブルがあります：

<table width="100%" style="border:1px solid #ccc;"> 
<tbody> 

<tr id="links"><td id="linkname"><a href="http://www.vg.no">vg</a></td><td id="link"><a href="http://www.vg.no">http://www.vg.no</a></td><td>&nbsp;</td><td>&nbsp;</td><td><div class="1" id="deltree">Slett</div></td></tr> 

<tr id="links"><td id="linkname"><a href="http://www.dt.no">test</a></td><td id="link"><a href="http://www.dt.no">http://www.dt.no</a></td><td>&nbsp;</td><td>&nbsp;</td><td><div class="2" id="deltree">Slett</div></td></tr> 

<tr id="links"><td id="linkname"><a href="http://www.vg.no">vg2</a></td><td id="link"><a href="http://www.vg.no">http://www.vg.no</a></td><td>&nbsp;</td><td>&nbsp;</td><td><div class="3" id="deltree">Slett</div></td></tr></tbody></table> 

ここに私のスクリプトです：

$(document).ready(function(){ 
$('#links').each(function() { 
    $('#deltree').click(function() { 
    var lid = $(this).attr("class"); 
    var dataString = 'lid='+ lid; 
alert(dataString); 
    }); 
    }); 
    }); 

私は他の2つのdivの上でクリックしたときにそれは私に警告することを拒否し、私はその理由を把握することはできません。どんな助けでも大歓迎です。

Answer 1

idはページごとに一意であると仮定されています。つまり、jQueryはgetElementById関数を使用して最初の要素を見つけて処理し、停止します。代わりにname属性と適切なjQueryセレクタ（$('div[name="deltree"]')）を使用する必要があります。

サンプルコード

表：

<table width="100%" style="border:1px solid #ccc;"> 
<tbody> 

    <tr id="links">... skipped ...<div class="1" name="deltree">Slett</div></td></tr> 

    <tr id="links">... skipped ...<div class="2" name="deltree">Slett</div></td></tr> 

    <tr id="links">... skipped ...<div class="3" name="deltree">Slett</div></td></tr></tbody></table> 

スクリプト：

$(document).ready(function(){ 
$('#links').each(function() { 
    $('div[name="deltree"]').click(function() { 
    var lid = $(this).attr("class"); 
    var dataString = 'lid='+ lid; 
alert(dataString); 
    }); 
    }); 
    }); 

Answer 2

使用クラス代わりにID、次に$（ "。classname"）セレクタ。 IDは一意でなければなりません。

Answer 3

複数の要素が同じidの場合、実際に何が起こるか分かりません。
idは一意である必要があります。

変化idは、一般的な方法でname

<table width="100%" style="border:1px solid #ccc;"> 
<tbody> 

<tr name ="links"><td id="linkname"><a href="http://www.vg.no">vg</a></td><td id="link"><a href="http://www.vg.no">http://www.vg.no</a></td><td>&nbsp;</td><td>&nbsp;</td><td><div class="1" id="deltree">Slett</div></td></tr> 

<tr name="links"><td id="linkname"><a href="http://www.dt.no">test</a></td><td id="link"><a href="http://www.dt.no">http://www.dt.no</a></td><td>&nbsp;</td><td>&nbsp;</td><td><div class="2" id="deltree">Slett</div></td></tr> 

<tr name="links"><td id="linkname"><a href="http://www.vg.no">vg2</a></td><td id="link"><a href="http://www.vg.no">http://www.vg.no</a></td><td>&nbsp;</td><td>&nbsp;</td><td><div class="3" id="deltree">Slett</div></td></tr></tbody></table> 

$(document).ready(function(){ 
    $('input[name=links]').each(function() { 
     $('#deltree').click(function() { 
     var lid = $(this).attr("class"); 
     var dataString = 'lid='+ lid; 
     alert(dataString); 
     }); 
    }); 
    });