jQuery plugin can't recognize .next()

Question

I tried creating a simple slideshow plugin but it states .next() is not a function.

Uncaught TypeError: currSlider.next is not a function at change (jquery.methodSlider.js:11)

(function ( $ ) {

$('.res-slideshow').methodSlider({
    speed:3000
});
$.fn.methodSlider = function(options) {
    var settings = $.extend({
        speed:1000
    },options);
    this.find('li:first').addClass('top');

    var change = function(){
        var currSlider = this.find('li.top');
        //This doesnt work.
        var nextSlider = currSlider.next();

        nextSlider.addClass('top');
        currSlider.removeClass('top');
    }
    setInterval(change, settings.speed);
    return this;
};

}( jQuery ));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="residence-slider">
    <ul class="res-slideshow">
        <li>
          <img src="img/site_images/home-01.jpg" alt="This is image 1">
        </li>
        <li>
          <img src="img/site_images/home-02.jpg" alt="This is image 2">
        </li>
        <li>
          <img src="img/site_images/home-03.jpg" alt="This is image 3">
        </li>            
    </ul>
</div>

Nico_ · Accepted Answer · 2017-07-20T08:39:54.993

1

As Andreas said, the matter comes from your this utilisation.

This is not the dom element as you use it, in jQuery, you have to add a $ before so it's $(this) to get the element.

In your case, since this was not the element, the next() function wasn't available.

I updated your code below :

(function ( $ ) {


$.fn.methodSlider = function(options) {
    var settings = $.extend({
        speed:1000
    },options);
    $(this).find('li:first').addClass('top');
    
    var that = $(this);
    var change = function(){
        var currSlider = that.find('li.top');
        var nextSlider = currSlider.next();

        nextSlider.addClass('top');
        currSlider.removeClass('top');
    }
    setInterval(change, settings.speed);
    return this;
};

$('.res-slideshow').methodSlider({
    speed:3000
});

}( jQuery ));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="residence-slider">
    <ul class="res-slideshow">
        <li>
          <img src="img/site_images/home-01.jpg" alt="This is image 1">
        </li>
        <li>
          <img src="img/site_images/home-02.jpg" alt="This is image 2">
        </li>
        <li>
          <img src="img/site_images/home-03.jpg" alt="This is image 3">
        </li>            
    </ul>
</div>

edited Jul 20 '17 at 08:39

answered Jul 20 '17 at 08:06

Nico_

1,388
17
31

Check the value of `this` ;) – Andreas Jul 20 '17 at 08:31
I checked and it worked, it has to be $('.res-slideshow')[0] without the $, no ? – Nico_ Jul 20 '17 at 08:34
`this` in `change` will be the global context -> `window` – Andreas Jul 20 '17 at 08:35
Oh yes ! I checked if the 'top' class was added correctly but since it's before the change it's legit, I'll edit my code. Thanks! – Nico_ Jul 20 '17 at 08:37
Now it's working :) the 'top' class goes from li to li. Thanks! – Nico_ Jul 20 '17 at 08:40
Ahh I see.... Thanks Nico! It makes sense now. – Reza San Jul 21 '17 at 07:15

jQuery plugin can't recognize .next()

1 Answers1