如何在JQuery中使用foreach循环

Question

我试图通过使用smarty模板和foreach循环在表中显示数据列表。但是我想给id提供在每个..下面显示新数据的功能，但它仅适用于第一个

问题是具有ID（主题）的img，我想每次单击img时都显示ID（结果）..但是它仅适用于第一行..我如何使它适用于所有行？

<script type="text/javascript">
$(document).ready(function(){    
$('#subjects').click(function(){  
$('#result').fadeIn(2000);
});
});
</script>

<br /><br /><table width="100%">
<tr class="tbl">
<td colspan="6">{$ci->lang->line('modules_list')}</td>
</tr><tr>
<td class="tbl1" style="width: 8%;">{$ci->lang->line('number')}</td>
<td class="tbl2" style="width: 28%;">{$ci->lang->line('title')}</td>
<td class="tbl1" style="width: 10%;">{$ci->lang->line('add_subject')}</td>
<td class="tbl2" style="width: 10%;">{$ci->lang->line('subjects_list')}</td>
<td class="tbl1" style="width: 8%;">{$ci->lang->line('edit')}</td>
<td class="tbl2" style="width: 8%;">{$ci->lang->line('delete')}</td>
</tr>
{foreach $modules_list as $module}
<tr>
<td class="tbl1" style="width: 8%;">{$module.number}</td>
<td class="tbl2" style="width: 28%;">{$module.title}</td>
<td class="tbl1" style="width: 10%;"><a href="{base_url('admincp/subjects/add')} /{$module.id}"><img src="{base_url('images/icons/add.png')}" /></a></td>
<td class="tbl2" style="width: 10%;"><img id="subjects" src="{base_url('images/icons/list.png')}" /></td>
<td class="tbl1" style="width: 8%;"><a href="{base_url('admincp/modules/edit')}/{$module.number}"><img src="{base_url('images/icons/edit.png')}" /></a></td>
<td class="tbl2" style="width: 8%;"><a onclick="return confirm('{$ci->lang->line('delete_confirm_msg')}')" href="{base_url('admincp/modules/delete')}/{$module.number}"><img src="{base_url('images/icons/delete.gif')}" /></a></td>
</tr>
<tr id="result" style="display:none">
<td>RESULT</td>
</tr>
{/foreach}
</table>
</div>
</body>
</html>

==

我已经解决了这个问题，现在可以使用，但是我还有另一个小问题，当我显示隐藏的tr时，我想使用aJax从另一个页面获取一些有关每个Moduke的信息。我希望它从页面获取一些数据（ modules / $ module_id）..我知道如何使用ajax ..但如何在JavaScript代码中使用变量{$ module_id}？

Answer 1

jQuery的工作方式如下：

$(".elements").each( function() {
  $(this);
})

http://api.jquery.com/jQuery.each/

Answer 2

ID在文档中必须唯一。 具有给定ID的对象只能是一个。 因此，尝试引用此版本的后续版本

<tr id="result" style="display:none">

超过第一个将不起作用。 $('#result')只会找到第一个。

相反，将其更改为一个类并执行以下操作：

<tr class="result" style="display:none">

$('.result:hidden').first().fadeIn(2000);

该类使您可以连接具有相同类的许多对象。 然后，jQuery找到具有该类的那些也被隐藏，然后仅在第一个中淡出的类。

Answer 3

您应该为results和subjects使用一个class ，否则您将获得重复的id属性，这将使您的页面无效。 另外，向每个模块tr添加一个类，以便可以容易地识别它。 尝试这个：

{foreach $modules_list as $module}
    <tr class="module-row">
        <td class="tbl1" style="width: 8%;">{$module.number}</td>
        <td class="tbl2" style="width: 28%;">{$module.title}</td>
        <td class="tbl1" style="width: 10%;"><a href="{base_url('admincp/subjects/add')} /{$module.id}"><img src="{base_url('images/icons/add.png')}" /></a></td>
        <td class="tbl2" style="width: 10%;"><img class="subjects" src="{base_url('images/icons/list.png')}" /></td>
        <td class="tbl1" style="width: 8%;"><a href="{base_url('admincp/modules/edit')}/{$module.number}"><img src="{base_url('images/icons/edit.png')}" /></a></td>
        <td class="tbl2" style="width: 8%;"><a onclick="return confirm('{$ci->lang->line('delete_confirm_msg')}')" href="{base_url('admincp/modules/delete')}/{$module.number}"><img src="{base_url('images/icons/delete.gif')}" /></a></td>
    </tr>
    <tr class="result" style="display:none">
        <td>RESULT</td>
    </tr>
{/foreach}

$('.subjects').click(function() {  
    var $tr = $(this).closest('tr');
    $tr.nextUntil('.module-row').fadeIn(2000);
});