jQuery each function help

simple hide/show using loop

[dwpub]

Hi,

I have a table cell that contains a nested div. This div consists of a paragraph that is split into two parts. Part 1 is displayed by default. Part 2 is hidden. I want part 2 to be revealed via a link click.

Heres an example of the code:

<tr valign="top" class="row-col-on">
<td style="white-space:nowrap">Name</td>
<td><a href="mailto:[e-mail]">[e-mail]</a></td>
<td>Lorem ipsum dolor sit amet... <a id="trigger1">Show all</a><div id="showhide1">consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</td>
<td>None</td>
</tr>
<tr valign="top" class="row-col-on">
<td style="white-space:nowrap">Name</td>
<td><a href="mailto:[e-mail]">[e-mail]</a></td>
<td>Lorem ipsum dolor sit amet... <a id="trigger2">Show all</a><div id="showhide2">consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</td>
<td>None</td>
</tr>

The table above has 9 more rows that follow suit, the only change being the a href id and showhide div id, which increment by 1.

Here is the jQuery to perform the onclick toggle

jQuery(document).ready(function(){
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
jQuery.each(arr, function() {
jQuery('#showhide' + this).hide();
jQuery( '#trigger' + this ).bind('click', function () { jQuery('#showhide' + this).toggle(); }) 
 });
 });

I've used an each loop so that it applies to each showhide div and each a href trigger.

The hide() works but the hide/show fails.

Any ideas how to get this to work, or even suggestions on another way of doing this?

[whoisgregg]

I don't use jQuery myself, so I don't know it's particular quirks. However, if I was doing this in Prototype, the one thing I would check is that

this

is defined how I think it should be defined. In your case, add an alert in the function block to make sure it's properly set:

jQuery( '#trigger' + this ).bind('click', function () { alert('#showhide' + this); jQuery('#showhide' + this).toggle(); }) 

See if that has the number it should have and post back what you find. :)

[dwpub]

Thanks for your reply.

I tested the outcome of

this

by inserting the data directly into a div. The outcome was as expected

<div>showhide1</div>

1 being

this

.The number changes as it iterates through the loop.

This is why I am stumped as the loop actually does a part of what I want it to do, just not the toggle

[whoisgregg]

So I think what you did to test was update the contents of the div during the loop?

The thing about

this

is that it can change once you are outside of the loop... like when the function gets called later on by the user. The alert() method should reveal if there's a disconnect between what

this

is during the loop and what it is outside the loop.

It's quite possible that

this

will end up being a reference to the #trigger element itself. And, if that's the case, you should be able to grab the number from the id and use that to recreate the pointer to the #showhide element.

If that still doesn't solve it, hopefully someone with more jQuery experience will chime in to help with this. :)