繁体   English   中英

循环遍历div中的每个图像并将变量设置为倍数

loop through each image in div and set variable as a multiple

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我想循环遍历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
}
2 个回复

如果您已经在使用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> 

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

可能会成功

1 如何遍历每个图像并设置每个图像的大小?

我下面的代码可以很好地获取第一张图片的大小,然后在页面上的每张图片上添加margin-top和margin-left 。 但这是以第一张图片作为所有其他图片的基础。 如何遍历并使用每个图像的大小来查找左边缘和顶部边缘应使用的值? ...

2011-10-13 19:51:27 1 12914   jquery
2 jQuery循环遍历每个div

我很确定这对你来说是一个非常简单的答案jQuery wizzes,而且我也很漂亮,这涉及到某种循环。 我试图在两个单独的div上执行基本相同的计算,但是根据找到的图像数量为每个id分配不同的CSS宽度值。 我正在执行的计算与我的问题无关,但无论如何我都将它们放入,因为它是我正在使用的实际 ...

3 循环遍历jquery中的每个div

我有以下代码可以检索下面的元素。 [1] [2] 题: 我想要的是遍历每个 div 并获取其 ID,但我无法遍历 div。 我尝试过的: 但它在这附近抛出这个错误 未捕获的语法错误:意外的标记 o ...

5 在数据集的多列中运行循环以创建新变量

我正在尝试使用一个遍历14列的循环创建新变量,如果该字符串存在于14列中的任何一列中,则返回1;如果该字符串不在14列中的任何一列中,则返回0。 以下代码有效,但很乏味,我希望有人知道一种更有效的方法。 工作代码: 显然这很繁琐... 我认为这样可能有效: 但是我收 ...

6 在C#的类中多次使用循环和遍历变量

我有一个TrayDetails类, TrayDetails包含一堆变量。 然后我在主表单上声明了两次。 我想遍历特定的Right或Left变量,并在满足条件时将其所有变量设置为string.empty 。 码: 如何获得所需的输出? ...

7 jQuery无限循环遍历每个div

我有一些带有div的div,我想从当前的一个类中删除一个类,然后在下一个类中添加一个类。 然后当我到达最后一个时,我想回到开始并重新做一遍。 我已经有了这样做的方法,但它只适用于一组div,我将有许多需要独立循环的div组。 这是一些示例(每个都有一个随机数量的div): ...

8 jQuery遍历每个div ID

我正在尝试使用jquery遍历id =“ rate”的每个div标签。 然后,jQuery将在单独的div上执行功能。 这是我的代码: info.html rate.js style.css 题: 我所拥有的是带有div id =“ rate”的多个隐藏文 ...

9 遍历变量有多个结果

我正在尝试定位存储在变量中的循环结果,然后将按钮附加到目标结果。 这里发生的是该按钮被附加到每个结果中。 ...

2019-07-31 17:47:30 1 40   jquery
10 @each循环设置多个属性

我正在尝试创建一个@each循环,该循环将为我设置多个属性。 在我的html中,我在行中有四个段落,随着页面的关闭,我想为每个段落调整颜色和字体大小。 显然,我正在做的事情没有用:还有什么我可以尝试的吗? ...

2014-04-06 04:35:22 1 25   css/ sass
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM