我想循环遍历div中的所有图像,并将“ left”设置为比上一个图像的left设置多50px。 我在语法上遇到了麻烦。 如何显示第i个img?

的HTML:

<div class="col-md-5 leftimage">
        <div class="imageholder">
            <img src="img/photo1.jpg" />
            <div class="caption">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
        </div>
        <div class="imageholder">
            <img src="img/photo2.jpg" />
            <div class="caption">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
        </div>
        <div class="imageholder">
            <img src="img/photo3.jpg" />
            <div class="caption">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
        </div>
    </div>

CSS:

.leftimage {
    position: relative;

}
.leftimage .imageholder {
    position: absolute;
    top: 0px;
    left: 0px;
    cursor: pointer;
    width: 300px;
    width: max-content;
}

.imageholder:nth-child(1) {
    /*left: 100px;*/

}
.imageholder:nth-child(2) {
    /*left: 50px;*/

}
.caption {
    color: gray;
    font-size: 80%;
    padding: 10px;
}

jQuery的:

for (var i = 0; i<$('.imageholder img').length; i++) {
    $('.imageholder img')[i].css('left', i*50 + 'px'); //this syntax isn't right
}

#1楼 票数:3 已采纳

如果您已经在使用jQuery,则最好使用.each()函数。

$(".leftimage > div").each(function(index){
  $(this).find("img").css("left", index*50 + "px");
});

这是一个例子:

 $(".leftimage > div").each(function(index){ $(this).find('img').css("left", index*50 + "px"); $(this).find('.caption').text(index*50 + "px"); }); 
 .leftimage { position: relative; } .leftimage .imageholder { position: relative; top: 0px; left: 0px; cursor: pointer; width: 300px; width: max-content; } .leftimage .imageholder img { height:100px; width:300px; } .caption { color: gray; font-size: 80%; padding: 10px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="leftimage"> <div class="imageholder"> <img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png" /> <div class="caption">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div> </div> <div class="imageholder"> <img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png" /> <div class="caption">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div> </div> <div class="imageholder"> <img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png" /> <div class="caption">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div> </div> <div class="imageholder"> <img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png" /> <div class="caption">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div> </div> </div> 

#2楼 票数:0

for (var i = 0; i<$('.imageholder img').length; i++) {
    $($('.imageholder img')[i]).css('left', i*50 + 'px'); //this syntax isn't right
}

可能会成功

  ask by LauraNMS translate from so

未解决问题?本站智能推荐:

4回复

如何在具有特定类的容器中循环遍历每个div?

我有多个具有“标志容器”类的div。 我的目标是(使用jquery)遍历每个div,在其中查找图像(每个div具有单个子图像),然后返回该图像的ID。 我将如何实现这一目标并一一遍历这些div? (我对JS循环不太满意)
2回复

使用jquery添加带有循环的div并将div设置为变量

我对这种行为很好奇。 为什么这只会创建一个div : let text = 'some text'; let $div = $('<div></div>'); $div.text(text); for (let x = 0; x < 5; x++) { $('a
1回复

循环遍历每个元素并存储为变量

我有一个系统生成的表,其中包含每个行元素中的链接。 这些链接中的每一个在链接末尾都有一个唯一的4位数值。 目标是迭代这些表元素中的每一个,抓取它所拥有的链接,然后将该链接切成最后的4个字符。 我现在正在运行: HTML jQuery的 这种工作......初始变量存储它找到
2回复

循环遍历div中的所有图像并显示具有模糊效果的图像

我在div中有多个图像,例如 现在我想遍历所有图像并显示为模糊,并在鼠标悬停时将其显示为原始形式。 我可以用简单的jquery做到吗,我已经使用gaussian.js blur.js进行了一些教程和演示,但无法正确完成。 请提出建议。
2回复

循环遍历每个锚点,然后使用jQuery在模式框中显示图像

我已经动态生成了div,其内容包含锚链接和图像路径。 我也有一个带有图像标签的模式框。 我想做的是锚链接的onclick,在模式框中设置图像标签路径。 当前,无论单击什么锚链接,我的代码都将执行操作,它始终将图像路径设置为第一个路径链接。 这是我的JSFiddle链接 的js
3回复

jQuery用div替换图像并将图像设置为背景

我有一个div图像..例如: 并且我想使用jQuery遍历每个图像并使其成为div然后将图像作为背景图像...将像这样: 我知道如何为一个人做这个但不确定通过我的父div( image-container )中的所有图像并转换它们的最佳方法。 任何帮助将非常感谢。 C
2回复

循环变量中的每个节点

我有一个包含几个具有相同类的HTML节点的变量。 我想循环遍历每一个,我想知道我会怎么做。 我尝试了以下,但没有任何反应(控制台没有打印出任何东西)。
1回复

如何在setTimeout的无限循环中循环遍历每个div的display属性,从“display:none”到“display:block”?

我有一个显示 gif 图像的 div,我有 4 个 gif 图像以无限循环的不同持续时间循环(gif 应该循环 1 2 3 4 然后 1 2 3 4 无限循环) 我的 gifplayer div:除了第一个 div,其他 4 个 div 的初始显示属性设置为无 每个 gif 都有不同的持续时间,我想