Question

我的HTML中有这个：

<div id="slideshow">
    <div class="image">
            <img src="http://upload.wikimedia.org/wikipedia/en/a/aa/Bart_Simpson_200px.png" alt="Bart"/>
            <div class="caption">Bart Simpson</div>
    </div>
    <div class="image">
            <img src="http://upload.wikimedia.org/wikipedia/en/e/ec/Lisa_Simpson.png" alt="Lisa"/>
            <div class="caption">Lisa Simpson</div>
    </div>
    <div class="image">
            <img src="http://upload.wikimedia.org/wikipedia/en/0/02/Homer_Simpson_2006.png" alt="Homer"/>
            <div class="caption">Homer Simpson</div>
        </div>
    </div>

在我的Jquery中，我在类图像中添加了一个带有一些文本的类。但是，使用：

$(".image").append(data[index]);

其中data是包含新类代码的数组，代码进入类图像的所有实例。现在，我想要做的是：基于索引，我想将新代码添加到特定的图像类中。因此，对于索引0，我想将代码添加到类中，使用Bart作为索引1，使用Lisa添加到类等等...

我不能使用if语句，因为HTML中的图像数量可能会改变，但不会改变js文件。

Answer 1

您可以使用jquery的.eq()函数根据索引选择元素。

$('.image').eq(index).append(data[index]);

我猜你想要这样的东西。

Answer 2

您可以将功能传递给.append()：

$(".image").append(function(index) {
    return data[index];
});

这些函数作为第一个参数传递元素索引。（当前HTML内容作为字符串作为第二个参数传递，但我的示例并不需要它。）

Answer 3

每个函数将为匹配选择的每个元素运行函数，在本例中为.image。每次运行each（）函数时，索引都会传递给var index。所以这个：

$(".image").each(function (index, element) {
  $(element).append(data[index]);
});

将正确的数据附加到div。

Answer 4

如果你想在特定的索引处使用类'image'的div，你可以这样做：

$('.image')[index].append(data[index])

或

$('.image').eq(index).append(data[index]);

如果你想对所有带图像类的div进行操作，你必须使用循环

在那种情况下

$('.image').each(function(index,current)){
    $(current).append(data[index]);
}

使用jQuery定位特定的div

4 个答案: