CODEWITHSUNDEEP
jqueryjquery-selectors
RCNeil
RCNeil

Reputation: 8759

Find Next() div based on Class, Test to see if Last Element

I'm trying to cycle through a series of <div> elements by using has() to determine if the element has a specific class, and then cycle through to the next element with next(). I'm not using hasClass() because that returns true/false and I'm trying to store the selected element as a variable to use later in a function to test if it is the last. I could be very well using the wrong selectors.

Here is the example mark-up:

<div class="hello"><p>Hello 1</p></div>
<div class="hello slide"><p>Hello 2</p></div>
<div class="hello"><p>Hello 3</p></div>
<a href="javascript:void(0);" class="next">NEXT ONE!</a>

And the example JQuery:

$('.next').click(function() {
var current = $('.hello').has('.slide');
var nextUp = $('.hello').has('.slide').next();

if( nextUp == '' ) {
    $('.hello:first').addClass('slide');
    $('.hello:last').removeClass('slide');
} else {
    $(nextUp).addClass('slide');
    $(current).removeClass('slide');
}
});

So, I want to see if the element with the class .hello has the class .slide, and if it does, find the next() sibling with the class .hello.

Then, my thought was if there is no next(), perform the action with the :last and :first element instead. Please advise.

JS FIDDLE - http://jsfiddle.net/c4ZNm/

Upvotes: 0

Views: 738

Answers (3)

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33870

You code have some issues. First, .has check if the element has descendant that match the selector. You just need to combine the selector to .hello.slide.

var current = $('.hello.slide');

You can then reuse that variable to target the next element.

var nextUp = current.next('.hello');

You need to check the length to know if it found something, not an empty string.

 if( nextUp.length === 0)

You also don't need to wrap your current and nextUp in a jQuery element, they already are a jQuery element.

nextUp.addClass('slide');
current.removeClass('slide');

Final code :

$('.next').click(function() {
    var current = $('.hello.slide');
    var nextUp = current.next('.hello');
    
    if( nextUp.length === 0) {
        $('.hello:first').addClass('slide');
        $('.hello:last').removeClass('slide');
    } else {
        nextUp.addClass('slide');
        current.removeClass('slide');
    }
});

Fiddle : http://jsfiddle.net/c4ZNm/14/

Upvotes: 0

j809
j809

Reputation: 1499

You would like to do these:

  1. You can directly select using .slide.
  2. Check the length of nextUp instead.

Try this, seems to be a workaround:

JS

$('.next').click(function() {
    var current = $('.slide');
    var nextUp = $('.slide').next('.hello');

    if( nextUp.length == 0 ) {
        $('div.hello:first').addClass('slide');
        $('div.hello:last').removeClass('slide');
    } 
    else {
        $(nextUp).addClass('slide');
        $(current).removeClass('slide');
    }
});

JSFIDDLE DEMO

Upvotes: 2

guramidev
guramidev

Reputation: 2238

Here is working fiddle: http://jsfiddle.net/c4ZNm/10/

instead of 

$('.hello').has('.slide')

use 

$('.hello.slide')

When there is no more next element, nextUp wont be '', its length will be 0. I added count to count all .hello divs - 1 for indexication. because :last-child is your "a" tag element, not .hello div, so instead :nth-child(3) selector i added .eq(count) to be more dynamic.

Best regards

Upvotes: 1

Related Questions