Question

I’m trying to get an .each function going on the “Deltree” div that selects the .attr('class') for each div and alerts me of its value, but it’s only working on the first of the deltree div’s. Here’s my table:

<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>

Here’s my script:

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

It just refuses to alert me when I click on the other 2 div’s, and I can’t figure out why. Any help greatly appreciated.

Answer 1

id is supposed to be unique per page – so jQuery finds the first element (using getElementById function, I suppose), processes it and stops. You should use name attribute and appropriate jQuery selector ($('div[name="deltree"]')) instead.

Sample code

Table:

<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>

Script:

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