how to use foreach loops with JQuery

Question

i'm trying to show list of data in a table by using smarty templates and foreach loops .. but i want to give an id the ability to show new data below every .. but it works with the first only

problem is with the img with id (subjects) i want to show the id (result) each time i click the img .. but it works only with the first line .. how can i make it works with all lines ??

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

==

i've solved this problem , it works now but i have another small problem , i want to use aJax to get some information from another page about each moduke when i show the hidden tr .. i want it to get some data from page (modules/$module_id) .. i know how to use ajax .. but how can i use the variable {$module_id} in javascript code ??

Answer 1

This is how the jQuery each works:

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

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

Answer 2

An id must be unique in the document. There can only be one object with a given id. So, trying to refer to subsequent versions of this

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

beyond the first one will not work. $('#result') will only find the first one.

Instead, change it to a class and do this:

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

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

The class allows you to have the many objects with the same class attached. The jQuery then finds the ones with that class that are also hidden and then fades in only the first one.

Answer 3

You should use a class for results and subjects , otherwise you'll get duplicate id attributes which will render your page invalid. Also, add a class to each module tr so it can be easily identified. Try this:

{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);
});