如何在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);
});