.each() should do what you want.
It will iterate through each element that has the class "Item" and
will set "this" to that individual element. So no $(this) will not be
the same as $(.item) e.g with this markup
<div class="item"/>
<span class="item"/>
$(".item").each() will execute twice with "this" being the DIV then
the SPAN.
Jsbeginner wrote:
> Hello again, I've been continuing my search and it seems that the .each
> function is not working the way I wanted it to...
>
> From what I've understood $(".item").each(function(){}) just counts how
> many elements have the 'item' class, and then executes the code that
> number of times with $(this) being the same as $(".item").
>
> How would I go about running a function on each element ? would I have
> to do something with a counter an the next function to achieve this ? or
> is there an easier way ?
>
> Thankyou.
>
> Jsbeginner wrote :
> >
> > Hello,
> >
> > I've been struggling with a very simple code that I can't get to work ...
> >
> > Simplified html :
> >
> > <ul>
> > <li>
> > <p>Item 1<p>
> > <p class="toggle">Hidden contents 1</p>
> > <p><a href="#" class="down">Click to show</a></p>
> > </li>
> > <li>
> > <p>Item 2<p>
> > <p class="toggle">Hidden contents 2</p>
> > <p><a href="#" class="down">Click to show</a></p>
> > </li>
> > <li>
> > <p>Item 3<p>
> > <p class="toggle">Hidden contents 3</p>
> > <p><a href="#" class="down">Click to show</a></p>
> > </li>
> > </ul>
> >
> > This is what I want to do :
> >
> > When you click on a Click to show link it shows the hidden contents
> > contained in the item's "toggle" paragraphe and changes the link text
> > to "Click to hide".
> > I also want to only be able to have one hidden contents showing at a
> > time, so I would like to be able to hide any other visible hidden
> > contents before showing the hidden contents asked for.
> >
> > I know my code isn't perfect but the following code works to some
> > extent : I can show or hide the contents but not hide all other
> > contents before showing new contents.
> > --------------------------
> > function down() {
> > $("a.down").each(function(){
> > $(this).click(function(){
> > reinit();
> > $(this).parent("p").prev("p").slideDown(300);
> > $(this).parent("p").html("<a href=\"#\" class=\"up\">Click
> > to hide</a>");
> > up();
> > return false;
> > });
> > });
> > }
> >
> > function up() {
> > $("a.up").each(function(){
> > $(this).click(function(){
> > $(this).parent("p").prev("p").slideUp(300);
> > $(this).parent("p").html("<a href=\"#\"
> > class=\"down\">Click to show</a>");
> > down();
> > return false;
> > });
> > });
> > }
> >
> > function reinit(){
> > $(".toggle").each(function(){
> > $(this).slideUp(300);
> > $(this).next("p").html("<a href=\"#\" class=\"down\">Click to
> > show</a>");
> > });
> > }
> >
> > $(document).ready(function(){
> > down();
> > });
> > --------------------------
> >
> > There is just one line that doesn't work it's in the reinit function :
> >
> > $(this).next("p").html("<a href=\"#\" class=\"down\">Click to show</a>");
> >
> > I've been trying lots of ways to get this working without success... I
> > thought it would work with the next function but no luck.
> >
> > If it will help you to find what I've done wrong I've put all the
> > necessary code (except the jquery library) in one html file, I've not
> > added it to this help request to not make it too long, but if you
> > find it difficult to follow me I can post it's contents so you can
> > test it.
> >
> > Thankyou.
> >
> >
> >
> >
> >
> >
> >
