CODEWITHSUNDEEP
jqueryimagerandom
painotpi
painotpi

Reputation: 6996

Randomly display images using jQuery

You have a set of images:

<ul class="thumb">
    <li><a href="#">
        <img src="images/att.jpg" title="Store AT&T" alt="" /></a></li>
    <li><a href="#">
        <img src="images/images%20(10).jpg" title="Store Wiki" alt="" /></a></li>
    <li><a href="#">
        <img src="images/nintendo.jpg" title="Store Nintendo" alt="" /></a></li>
    <li><a href="#">
        <img src="images/images%20(11).jpg" title="Store WorldConference" alt="" /></a></li>
    <li><a href="#">
        <img src="images/images%20(13).jpg" title="Store GoeSystem" alt="" /></a></li>
    <li><a href="#">
        <img src="images/images%20(14).jpg" title="Store Something" alt="" /></a></li>
    <li><a href="#">
        <img src="images/images%20(3).jpg" title="Store Lego" alt="" /></a></li>
    <li><a href="#">
        <img src="images/images%20(4).jpg" title="Store Something" alt="" /></a></li>
    <li><a href="#">
        <img src="images/images%20(3).jpg" title="Store Lego" alt="" /></a></li>
</ul>

I want to .fadeIn() images randomly. I tried the solution given here, but my .children().length is always 0 for some reason.

How can I fix this?

Upvotes: 0

Views: 1517

Answers (2)

Zsipgun
Zsipgun

Reputation: 29

What selector do you use before .children().length? You should search for your class name, since you have not given that element an id:

$(".thumb").children().length

Or assign an id to it:

<ul class="thumb" id="container">
    <li><a href="#">
        <img src="images/att.jpg" title="Store AT&T" alt="" /></a></li>
    <li><a href="#">
        <img src="images/images%20(10).jpg" title="Store Wiki" alt="" /></a></li>
    <li><a href="#">
        <img src="images/nintendo.jpg" title="Store Nintendo" alt="" /></a></li>
    <li><a href="#">
        <img src="images/images%20(11).jpg" title="Store WorldConference" alt="" /></a></li>
    <li><a href="#">
        <img src="images/images%20(13).jpg" title="Store GoeSystem" alt="" /></a></li>
    <li><a href="#">
        <img src="images/images%20(14).jpg" title="Store Something" alt="" /></a></li>
    <li><a href="#">
        <img src="images/images%20(3).jpg" title="Store Lego" alt="" /></a></li>
    <li><a href="#">
        <img src="images/images%20(4).jpg" title="Store Something" alt="" /></a></li>
    <li><a href="#">
        <img src="images/images%20(3).jpg" title="Store Lego" alt="" /></a></li>
</ul>

Then you can use the id selector:

$("#container").children().length

Upvotes: 0

James Montagne
James Montagne

Reputation: 78730

Update of your fiddle:

http://jsfiddle.net/jKtfZ/44/

In a selector the > character means direct child. Therefore, #container > img will return nothing. The img tags are not direct children of #container.

EDIT: also, not sure why you were adding 3 when creating your random number

EDIT2: similarly, $('#container').children().length; will give you the direct children of #container, that is the <li> elements, not the img.

Upvotes: 1

Related Questions