Функция jQuery .each в таблице не работает - PullRequest
Новая
       7

Функция jQuery .each в таблице не работает

1 голос
/ 19 января 2012

Я пытаюсь запустить функцию .each для div "Deltree", который выбирает .attr('class') для каждого div и предупреждает меня о его значении, но он работает только с первым div из deltree.Вот мой стол: 

<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 других дива, и не могу понять, почемуЛюбая помощь с благодарностью.

Ответы [ 3 ]

3 голосов
/ 19 января 2012

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);
    }); 
    }); 
  });
1 голос
/ 19 января 2012

Если у вас есть несколько элементов с одинаковым 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);
        }); 
    }); 
  });
1 голос
/ 19 января 2012

Используйте класс вместо id , затем селектор $ (". Classname '). Идентификаторы должны быть уникальными.

...