Search jQuery

jQuery Forum

jQuery equivalent of "for" loop

in Getting Started • 10 years ago

Hello

There is any equivalent of javascript "for" loop in jQuery ? i read about .each loop in jQuery but how to use it just like for loop in javascript ? For example

var example1 = 20;

for (var i=0; i<example1; i++)
{
alert("blabla");
}

?

Replies(8)

charlietfl

Re: jQuery equivalent of "for" loop

10 years ago

what are you trying to do that a for loop isn't working?

each will loop over a collection....array, object or jQuery eleemnts, but to do something x number of times a "for" works fine

born2fr4g

Re: jQuery equivalent of "for" loop

10 years ago

I see - co i can use for loop in jQuery scripts ? :)

So what I'm tring to do:

HTML code:

<div class="div_with_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue lectus sed tortor placerat quis porttitor dui vehicula. Morbi molestie tortor sit amet eros tempor consectetur.
</div>
<div class="show_more_btn">Show more</div>
<div class="div_with_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue lectus sed tortor placerat quis porttitor dui vehicula. Morbi molestie tortor sit amet eros tempor consectetur.
</div>
<div class="show_more_btn">Show more</div>
<div class="div_with_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue lectus sed tortor placerat quis porttitor dui vehicula. Morbi molestie tortor sit amet eros tempor consectetur.
</div>
<div class="show_more_btn">Show more</div>

CSS Code:

.showMore
{
display:block;
}
.div_with_content
{
display:none;
}

So i got plenty of divs with class "div_with_content"(witch are not displayed) with some content, usually text. Below each "div_with_content" there is a button wrapped in div "show_more_btn". So when i press on div show_more_btn there will be style added (trought addClass in jQuery) of class showMore to show this div slowly. So its easy to achieve:

JS code

$(function() {
$(".show_more_btn").click(function(event){
$(".div_with_content").addClass("showMore").show(1500,"swing");
});
});

But there is only one problem: when I press whichever show_more_btn all div_with_content are slowly shown, not only one precisely over show_more_btn. So what i want: when i press "show_more_btn" only "div_with_content" precisly over "show_more_btn" is going to be shown others "div_with_content" are still not visible. How do I achieve that ?

simonport..

Re: jQuery equivalent of "for" loop

10 years ago

When you search with jQuery for .div_with_content this returns all elements with that class, which is why all your divs are changing and not just the one you clicked on.

You could do it lots of ways, one of which would be to put your button inside the .div_with_content and use the jQuery(event.target).parent().addClass() for the click function.

$(".show_more_btn").click(function(event){
jQuery(event.target).parent().addClass("showMore").show(1500,"swing");
});

but at the moment, you need to take another read on what's returned from the jQuery selector you're using.

EDIT: Indeed, missed the hidden aspect. Ignore me!

charlietfl

Re: jQuery equivalent of "for" loop

10 years ago

if button was inside the hidden element it wouldn't be visible, much easier with a simple traverse using prev()
http://api.jquery.com/prev/

$(".show_more_btn").click(function(event){
$(this).prev().addClass("showMore").show(1500,"swing");
});

born2fr4g

Re: jQuery equivalent of "for" loop

10 years ago

Thank You very much :). Thats what i wanted.

I got just one more question:
Now when its working how to add this functionality:
When div_with_content is shown and when I press "show_more_btn" one more time it will HIDE pres div_with_content ?

charlietfl