CODEWITHSUNDEEP
javascriptjquery
Viktor Jakovlev
Viktor Jakovlev

Reputation: 77

How to select one specific element (div) from many elements with same class name in with jQuery?

I got problem targeting specific div that share same class name. In the code below, I am hiding all the divs in the css file, but i am displaying them in the jQuery script. But, instead of showing all of them, I want to show only one specific div, but I don't want to use div's specific ID. My point is to make for loop where I will rotate which div will be displayed. 

$(document).ready(function(){
  
  let divs = $('.divs');
    
  divs.css('display', 'block');

});
#div1 {
	background-color: rgb(246, 210, 88);
}

#div2 {
	background-color: rgb(239, 206, 197);
}

#div3 {
	background-color: rgb(136, 177, 75);
}

#div4 {
	background-color: rgb(151, 213, 224);
}

#div5 {
	background-color: rgb(239, 86, 45);
}

.divs {
	width: 300px;
	height: 300px;
	display: none;
}
<!DOCTYPE html>
	<html>
		<head>
			<title>Slider Exercise</title>
			<link rel="stylesheet" type="text/css" href="style.css">
		</head>
		<body>

			<div class="divs" id="div1"></div>
			<div class="divs" id="div2"></div>
			<div class="divs" id="div3"></div>
			<div class="divs" id="div4"></div>
			<div class="divs" id="div5"></div>


			
			<!-- Scripts -->
			<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
			<script src="viktor.js"></script>

		</body>
	</html>

Upvotes: 1

Views: 993

Answers (4)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

«My point is to make for loop where I will rotate which div will be displayed.»

Something like this?

The trick is to hide all .divs. Then shows only one, based on a counter. The .eq() method is used.

$(document).ready(function(){
  
  var i=0;
  var divs = $('.divs');
  
  divs.eq(0).show();
  
  $("#previous,#next").on("click",function(){
  
    divs.hide();
    if( $(this).attr("id")=="next" ){
      i++;
      i = (i>=divs.length) ? 0 : i;
    }else{
      i--;
      i = (i<0) ? divs.length-1 : i;
    }
    console.log(i);
    divs.eq(i).show();
  });

});
#div1 {
  background-color: rgb(246, 210, 88);
}

#div2 {
  background-color: rgb(239, 206, 197);
}

#div3 {
  background-color: rgb(136, 177, 75);
}

#div4 {
  background-color: rgb(151, 213, 224);
}

#div5 {
  background-color: rgb(239, 86, 45);
}

.divs {
  width: 300px;
  height: 300px;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="previous">Previous</button>
<button id="next">Next</button>
      
<div class="divs" id="div1"></div>
<div class="divs" id="div2"></div>
<div class="divs" id="div3"></div>
<div class="divs" id="div4"></div>
<div class="divs" id="div5"></div>

Upvotes: 1

Viktor Jakovlev
Viktor Jakovlev

Reputation: 77

Ok, I figure it out, here is my solution, someone might gonna find it helpful:

$(document).ready(function(){

    
    $('#div1').css('display', 'block');

    $('#previous').click(previousClick);
    $('#next').click(nextClick);

    let divs = $('.divs');
    let counter = 0;

    function previousClick() {

        if (counter > 0) {

            counter--;

            for (let i = 0; i < 5; i++) {
                $(divs[i]).css('display', 'none');
            }
            $(divs[counter]).css('display', 'block');
        } 
    }

    function nextClick() {

        if (counter < 4) {

            counter++;

            for (let i = 0; i < 5; i++) {
                $(divs[i]).css('display', 'none');
            }
            $(divs[counter]).css('display', 'block');
        } 
    }

});
#div1 {
	background-color: rgb(246, 210, 88);
}

#div2 {
	background-color: rgb(239, 206, 197);
}

#div3 {
	background-color: rgb(136, 177, 75);
}

#div4 {
	background-color: rgb(151, 213, 224);
}

#div5 {
	background-color: rgb(239, 86, 45);
}

.divs {
	width: 300px;
	height: 300px;
	display: none;
}
<!DOCTYPE html>
	<html>
		<head>
			<title>Slider Exercise</title>
			<link rel="stylesheet" type="text/css" href="style.css">
		</head>
		<body>

			<button id="previous">Previous</button>
			<button id="next">Next</button>

			<br>
			<br>

			<div class="divs" id="div1"></div>
			<div class="divs" id="div2"></div>
			<div class="divs" id="div3"></div>
			<div class="divs" id="div4"></div>
			<div class="divs" id="div5"></div>


			
			<!-- Scripts -->
			<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
			<script src="viktor.js"></script>

		</body>
	</html>

Upvotes: -1

Anthony
Anthony

Reputation: 1581

If you are looking to change which div is displayed randomly at a set interval you can use a combination of Math.random() and the setInterval function.

$(document).ready(function(){
  
  var divs = $('.divs');
  var index;
 	
  // runs every second
  setInterval(function(){
    // get a random whole number (may get the same random number consecutively)
  	index = Math.floor(Math.random() * divs.length);
    divs.css('display', 'none');                // hide all divs
  	$(divs[index]).css('display', 'block');   //display random div  
  }, 1000);
});
#div1 {
	background-color: rgb(246, 210, 88);
}

#div2 {
	background-color: rgb(239, 206, 197);
}

#div3 {
	background-color: rgb(136, 177, 75);
}

#div4 {
	background-color: rgb(151, 213, 224);
}

#div5 {
	background-color: rgb(239, 86, 45);
}

.divs {
	width: 300px;
	height: 300px;
	display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divs" id="div1"></div>
<div class="divs" id="div2"></div>
<div class="divs" id="div3"></div>
<div class="divs" id="div4"></div>
<div class="divs" id="div5"></div>

Upvotes: 1

jeprubio
jeprubio

Reputation: 18002

You mean to do something like this?:

$(document).ready(function(){
  
  let divs = $('.divs');
  let i = 0;

  setInterval(function() {
    divs.hide();
    $(divs[i++]).show();
    if (i >= divs.length)
        i = 0;
  }, 1000);

});
#div1 {
	background-color: rgb(246, 210, 88);
}

#div2 {
	background-color: rgb(239, 206, 197);
}

#div3 {
	background-color: rgb(136, 177, 75);
}

#div4 {
	background-color: rgb(151, 213, 224);
}

#div5 {
	background-color: rgb(239, 86, 45);
}

.divs {
	width: 300px;
	height: 300px;
	display: none;
}
<!DOCTYPE html>
	<html>
		<head>
			<title>Slider Exercise</title>
			<link rel="stylesheet" type="text/css" href="style.css">
		</head>
		<body>

			<div class="divs" id="div1"></div>
			<div class="divs" id="div2"></div>
			<div class="divs" id="div3"></div>
			<div class="divs" id="div4"></div>
			<div class="divs" id="div5"></div>


			
			<!-- Scripts -->
			<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
			<script src="viktor.js"></script>

		</body>
	</html>

Upvotes: 2

Related Questions