Question

我有一个问题。我将首先发布HTML，我知道你不应该使用表格进行设计和类似的东西。但它仅用于学习目的。

<table id="placeholder">
<tr>
    <td><img src="img/1.jpg"/></td>
    <td><img src="img/2.jpg"/></td>
    <td><img src="img/3.jpg"/></td>
</tr>
<tr>
    <td><img src="img/4.jpg"/></td>
    <td><img src="img/5.jpg"/></td>
    <td><img src="img/6.jpg"/></td>
</tr>
<tr>
    <td><img src="img/7.jpg"/></td>
    <td><img src="img/8.jpg"/></td>
    <td><img src="img/9.jpg"/></td>
</tr>
<tr>
    <td><img src="img/10.jpg"/></td>
    <td><img src="img/11.jpg"/></td>
    <td><img src="img/12.jpg"/></td>
</tr>
<tr>
    <td><img src="img/10.jpg"/></td>
    <td><img src="img/11.jpg"/></td>
    <td><img src="img/12.jpg"/></td>
</tr>
</table>

是否可以将所有IMG放入阵列？这样我就可以轻松淡出我想要的图像让我说我想摆脱第五张图片，我可以做一些像： images[4].fadeOut("slow");
或类似的东西。
是否有可能做到这一点？或者有更好的方法吗？
我已经尝试了var images = $('td > img');但是没有用（或者我做错了）。我也在网上寻找方法，但我还没有找到任何可以帮助我的东西。希望你可以吗？
提前谢谢！

Answer 1

您可以使用

选择所有图像

var $images = $('#placeholder img');

如果您现在想要选择特定图片，可以使用.eq() ^[docs]：

$images.eq(4).fadeOut();

$images[4]也有效，但不返回jQuery对象，但返回相应的DOM元素。因此，您无法直接在其上调用fadeOut。

如果没有jQuery，您可以使用getElementsByTagName ^[docs]获取所有图片：

var images = document.getElementById('placeholder').getElementsByTagName('img');

这为您提供了一个DOM元素的数组（实际上是NodeList），并且您再也无法直接调用它们上的jQuery方法fadeOut。

Answer 2

您的代码应该可以使用，例如

var imgs = $("#placeholder td > img");
console.log (imgs[0]);

您的JS可能在页面加载之前加载，因此您需要将它放在jQuery的文档就绪函数中：

$(function() {
    var imgs = $("#placeholder td > img");
    console.log (imgs[0]);
});

Answer 3

如果可以这样做，那将是非常好的，但你做不到。您希望能够说出<td><img src=imagearray[5]><td>，但html和css不允许这样做。然而，可以为每个<td>提供一个类，将每个类的图像存储为background-image:，并淡化这些人。

编辑： oops，没有看到jquery标记。

Answer 4

$('td > img')不是一个数组，而是一个jQuery对象。所以你可以这样使用它：

$('td > img').each(function(index, imageElement) {
    // Do logic based on the index or something else.
});

将元素放在数组中？

4 个答案: