CODEWITHSUNDEEP
javascriptjquery
Name
Name

Reputation: 408

Select next div with jquery?

//$(document).ready(function(){
	$('.next').click(function(){
		$('.box').fadeOut();
		$('.box').next().fadeIn();
	});
//});
.box{
	border:solid 1px #ccc;
	padding: 20px;
	width:10%;
	display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="next" style="cursor:pointer;">next</a> <br><br>
<div class="box" style="display:block;">
	1
</div>

<div class="box">
	2
</div>

<div class="box">
	3
</div>

<div class="box">
	4
</div>

I have a div .box, and the next button. I need to select the next div if i click the next button but only the first div not all. For example if i click next button while it shown box 1 then the next box that should be appear is 2 and so on. But now it shown 2 3 4. How to do this ?

Upvotes: 0

Views: 82

Answers (5)

selvarajmas
selvarajmas

Reputation: 1643

Try the following Jquery

var curr = 1;
$('.next').click(function(){
  if(curr < $( ".box" ).length) {
    $('.box').hide();
    $( ".box" )[curr].style.display= "block";
    curr += 1; 
  }
});

Here is the working jsfiddel : https://jsfiddle.net/Lv7yr820/1/

Upvotes: 0

Dij
Dij

Reputation: 9808

you can get the first visible div using $(.box:visible) and then fadeIn next div to it. you can also add a check for last element, in which case you can fadeIn the first element. something like this:

//$(document).ready(function(){
	$('.next').click(function(){
        var visibleBox = $('.box:visible');
		$(visibleBox).fadeOut();
		if(!$(visibleBox).next('div').length)
           $('.box').first().fadeIn();
        else
           $(visibleBox).next().fadeIn();
           
	});
//});
.box{
	border:solid 1px #ccc;
	padding: 20px;
	width:10%;
	display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="next" style="cursor:pointer;">next</a> <br><br>
<div class="box" style="display:block;">
	1
</div>

<div class="box">
	2
</div>

<div class="box">
	3
</div>

<div class="box">
	4
</div>

Upvotes: 2

srinivas
srinivas

Reputation: 109

If I understand your requirement this will work 

$(document).ready(function(){
  var i = 1;
    $('.next').click(function(){
        $('.box').fadeOut();
        $('.box:nth-child(i)').fadeIn();
        if(i >= $('.box').length)
        i++;
        else
        i=1; 
    });
});

Upvotes: 0

Mark
Mark

Reputation: 2063

you can use another class to labeled, which div is on the display. for example, you add a class display. then you put that class, on the first box. when you click next, you can remove the class display from the current one, and move it into the next one.

HTML

<a class="next" style="cursor:pointer;">next</a> <br><br>
<div class="box display">
    1
</div>

<div class="box">
    2
</div>

<div class="box">
    3
</div>

<div class="box">
    4
</div>

CSS

.box{
    border:solid 1px #ccc;
    padding: 20px;
    width:10%;
    display:none;
}
.display{
  display:block
}

JQuery

$('.next').click(function(){
    var current = $('.box.display');

current.fadeOut().removeClass('display').next().fadeIn().addClass('display');
});

Demo : https://jsfiddle.net/dfaLnsmo/

Upvotes: 1

Chris Lam
Chris Lam

Reputation: 3614

It's showing 2 3 4 because you ares selecting ALL .box elements, i.e. 1 2 3 4

.next() of 1 = 2

.next() of 2 = 3

.next() of 3 = 4

.next() of 4 = nothing

You should find the box that is currently being shown, and then find it's next sibling.

// Filter by CSS rule
var $showing = $('.box').filter(function() {
    return $(this).css('display') === 'block';
}).fadeOut();

// or using :visible
$showing = $('.box:visible').fadeOut();

$showing.next().fadeIn();

Upvotes: 2

Related Questions