CODEWITHSUNDEEP
javascriptjquery
RichardJ
RichardJ

Reputation: 105

JQuery syntax error puzzle

I'm modifying a JQuery script to fade elements in and out in a div (on a loop).

This is part of the script:

    var fadeDuration = 2000;
    var displayTime = 4000;
    var currentIndex = 1;
    var nextIndex = 1;
    $(document).ready(function () {
        $('ul.slideshow li').css({opacity: 0.0});
        $("'ul.slideshow li:nth-child(" + nextIndex + ")'").addClass('show').animate({opacity: 1.0}, fadeDuration);
        var timer = setInterval("nextSlide()", displayTime);
    });

This works without a problem if I use JQuery 1.5, but it fails if I use JQuery 1.12.0 or JQuery 2.2, giving me this error:

"Failed to execute 'querySelectorAll' on 'Element': '*,:x' is not a valid selector."

It fails at the 2nd line of the function:

$("'ul.slideshow li:nth-child(" + nextIndex + ")'").addClass('show').animate({opacity: 1.0}, fadeDuration);

I'm new to JQuery, and I'm using this as a learning exercise, but I'm baffled, and not sure how to start debugging the issue (given that it works with JQuery 1.5).

Any advice greatly appreciated!

Upvotes: 1

Views: 62

Answers (2)

Paul
Paul

Reputation: 9022

There are extra quotes in this line:

$("'ul.slideshow li:nth-child(" + nextIndex + 
")'").addClass('show').animate({opacity: 1.0}, fadeDuration);

Try

$("ul.slideshow li:nth-child(" + nextIndex + 
")").addClass('show').animate({opacity: 1.0}, fadeDuration);

Upvotes: 1

Quentin
Quentin

Reputation: 943556

This:

"'ul.slideshow li:nth-child(" + nextIndex + ")'"

will give you something like:

"'ul.slideshow li:nth-child(1)'"

when you want something like:

"ul.slideshow li:nth-child(1)"

Don't put apostrophes in the selector.

Upvotes: 5

Related Questions