Question

我需要一些帮助，使用jQuery循环多个div（3个或更多）。我所看到的外观是让我的主页将其主图像div与其他div一起旋转，以便背景图像（仅div的div）和div中包含的链接都会发生变化。

我已经创建了堆叠CSS效果并淡入后面的图像，但是现在我还需要更改div中的链接。

这是该部分的HTML -

<head>
<title>Sample</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.leanModal.min.js"></script>
<link type="text/css" rel="stylesheet" href="index.css" />
</head>

现在我要改变的Div

<div class="jumbotron-1">
<div class="container">
<h1>What We Are</h1>
<p> A Paragraph</p> 
<div class="divbutton">
<a href="#" class="myButton">Learn more</a>
</div>


</div>
</div>

<div class="jumbotron-2">
<div class="container">
<h1>What We Are</h1>
<p> A Paragraph</p> 
<div class="divbutton">
<a href="#" class="myButton">Learn more</a>
</div>


</div>
</div>

<div class="jumbotron-3">
<div class="container">
<h1>What We Are</h1>
<p> A Paragraph</p> 
<div class="divbutton">
<a href="#" class="myButton">Learn more</a>
</div>


</div>
</div>

我找到了与之相似的代码：

var slideShowDivs = ['.jumbrotron-1', '.jumbotron-2', '.jumbotron-3'];
var currentID = 0;
var slideShowTimeout = 1000;
$(document).ready(function() {
for (var i = 1; i < slideShowDivs.length; i++)              $(slideShowDivs[i]).hide();
setTimeout(slideShowChange, slideShowTimeout);
});
function slideShowChange() {
var nextID = currentID + 1;
if (nextID >= slideShowDivs.length) nextID = 0;
$(slideShowDivs[currentID]).stop(true).fadeOut(400);
$(slideShowDivs[nextID]).stop(true).fadeIn(400, function() {
    setTimeout(slideShowChange, slideShowTimeout);
});
currentID = nextID;
}

但它似乎无法奏效。

还有其他想法吗？

Answer 1

尝试jquery每次输入for循环

$('.jumbrotron-1,.jumbotron-2,.jumbotron-3').each(function() {
   $(this).hide();
   setTimeout(slideShowChange, slideShowTimeout);
  });

jsfiddle：http://jsfiddle.net/66Lz2xou/2/

或

$('div[class^="jumbrotron"]').each(function() {
   $(this).hide();
   setTimeout(slideShowChange, slideShowTimeout);
  });

http://jsfiddle.net/66Lz2xou/3/

Answer 2

对不起，我需要50点评论，但我想离开@ARUN BERTILs答案。

您可以将div放在如下数组中：

var div_array = ['.jumbotron-1', '.jumbotron-2', '.jumbotron-3']
jQuery.each(div_array,function(i, val){
/* What you want each one to do*/

    //example 
    $(val).css('background','blue');
})

Answer 3

您最好的方法是使用此approach

  $( "div" ).each(function( i ) {
   //Your condition
  }  });

Answer 4

使用班级选择器

$(".jumbotron-1 .jumbotron-2 .jumbotron-3").each(function( i ) {
   //process your code here
  }  });

或者如果你想要子容器divs附加＆gt;每个选择器的容器，如.jumbotran-1＆gt;容器

如何使用jQuery循环3个div

4 个答案: