使用 jQuery 随机显示图像答案

【问题标题】：Randomly display images using jQuery使用 jQuery 随机显示图像
【发布时间】：2014-08-15 02:49:55
【问题描述】：

你有一组图像：

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

我想随机.fadeIn() 图片。我尝试了here 给出的解决方案，但由于某种原因我的.children().length 始终为0。

我该如何解决这个问题？

【问题讨论】：

确保在执行该脚本之前等待 DOM 加载。孩子必须在 jQuery 识别它们之前渲染。

标签： jquery image random

【解决方案1】：

你的小提琴更新：

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

在选择器中，> 字符表示直接子代。因此，#container > img 不会返回任何内容。 img 标签不是#container 的直接子代。

编辑：另外，不确定为什么在创建随机数时要添加 3

EDIT2：同样，$('#container').children().length; 会给你#container 的直接子元素，即<li> 元素，而不是img。

【讨论】：

嘿，非常感谢，工作到深夜，所以猜我忘记了我在做什么，不知道为什么我添加了 3！

【解决方案2】：

.children().length 之前你使用什么选择器？你应该搜索你的类名，因为你没有给那个元素一个 id：

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

或者给它分配一个id：

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

然后就可以使用id选择器了：

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

【讨论】：