如何使用jQuery循环3个div

Question

我需要使用jQuery循环多个div（3个或更多）的帮助。 我的外观是让我的主页与其他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

嗨，最好的方法是使用这种方法

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

Answer 4

使用类选择器

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

或者如果您想让子容器div将>容器附加到每个选择器，如.jumbotran-1> container

如何使用jQuery循环3个div

问题描述

4 个解决方案

解决方案1
4 已采纳 2015-04-29 05:10:04

解决方案2
1 2015-04-29 05:19:16

解决方案3
0 2015-04-29 05:06:38

解决方案4
0 2015-04-29 05:13:38

如何使用jQuery循环3个div

问题描述

4 个解决方案

解决方案1 4 已采纳 2015-04-29 05:10:04

解决方案2 1 2015-04-29 05:19:16

解决方案3 0 2015-04-29 05:06:38

解决方案4 0 2015-04-29 05:13:38

解决方案1
4 已采纳 2015-04-29 05:10:04

解决方案2
1 2015-04-29 05:19:16

解决方案3
0 2015-04-29 05:06:38

解决方案4
0 2015-04-29 05:13:38