如何循環3 div與jQuery

我需要一些幫助循環使用jQuery的多個div（3或更多）。我之後的樣子是讓我的主頁將其主div與其他div一起旋轉，這樣div（只有div的背景圖像）以及div中包含的鏈接都會發生變化。如何循環3 div與jQuery

我已經創建了堆疊CSS並淡入圖像背後的效果，但是現在我還需要div中的鏈接進行更改。

這是部分的HTML - 我想改變

<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>

我發現了一個類似的代碼我是什麼

<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>

現在股利後：

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; 
}

但它似乎沒有工作。

還有其他想法嗎？

來源

2015-04-29 Jgz

http://jsfiddle.net/arunpjohny/66Lz2xou/1/ –

你有數組在類型'.jumbrotron-1'的 - 它應該是'jumbotron-1' –

嘗試jQuery的for循環每個insted的的

$('.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/

來源

2015-04-29 05:10:04 madalinivascu

完美!!!!謝謝。正是我需要的 – Jgz

不要忘記接受答案 – madalinivascu

還有一件事，divs工作，但第二個我添加圖像，代碼停止工作。任何想法爲什麼？我想背景圖像（位於CSS）隨它移動，但它似乎停止運行的腳本 – Jgz

嗨，最好的辦法就是用這種approach

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

來源

2015-04-29 05:06:38

使用類選擇

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

，或者如果你想要孩子的div容器連接>容器每個像.jumbotran-1選擇器>容器

來源

2015-04-29 05:13:38 JackOfAllTrades

對不起，我需要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'); 
})

來源

2015-04-29 05:19:16

如何循環3 div與jQuery

回答

相關問題