CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jgz
Jgz

Reputation: 15

How to loop 3 divs with jQuery

I need a little help looping multiple divs (3 or more) using jQuery. The look I am after is having my home page rotate its main image div with other divs so that both the background image (of the div only) changes as well as links contained within the div.

I had created the effect with stacking CSS and fading in to an image behind, however now I also require the links in the div to change.

This is the HTML for the section - 

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

Now the Div that I want changing

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

I found a similar code to what I am after :

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

But it doesnt seem to work.

Any additional thoughts?

Upvotes: 1

Views: 426

Answers (4)

David Gilliam
David Gilliam

Reputation: 172

Sorry I need 50 reputation to comment, but I wanted to go off of @ARUN BERTILs answer.

You could put the divs in a array like:

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

Upvotes: 1

JOAT
JOAT

Reputation: 188

use class selectors 

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

or if you want child container divs attach > container to each of the selectors like .jumbotran-1 > container

Upvotes: 0

madalinivascu
madalinivascu

Reputation: 32354

Try jquery each insted of for loop

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

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

or 

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

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

Upvotes: 4

Arun Bertil
Arun Bertil

Reputation: 4648

Hi the best approach is to use this approach

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

Upvotes: 0

Related Questions