Uncaught Syntax error, unrecognized expression: [object Object]

Question

Working currenly on news scroller - see my live example here - EXAMPLE

When I press next/prev arrow I'm getting an error log Uncaught Syntax error, unrecognized expression: [object Object]

Why is the problem? Where is the error in the syntax?

jQuery Code:

        (function($) {
    /*!  Scroller
        ---------------------------------------------*/
        $.fn.Scroller = function() {

            //Set height
            $('.scroller').each(function() {
                var height = 0;
                $(this).children('div').each(function() {

                    if (height < $(this).height()) {
                        height = $(this).height();
                    }

                });
                $(this).css("height", height + "px");

            });

            $('.scroller').each(function() {

                var NextArrow = $(this).parent().find('.next');
                var PrevArrow = $(this).parent().find('.prev');


                // Set a timeout
                var timeOut = setTimeout(nextNotice, 5000);

                // pause on hover
                $(this).hover(

                function() {
                    clearTimeout(timeOut);
                }, function() {
                    timeOut = setTimeout(nextNotice, 5000);
                });

                // Next notice function called on timeout or click
                //set a flag that use to be an oberver to listen when the fadeIn done
                var flag = true;

                function nextNotice(event) {

                    var CurrentScrollerDiv = $(this).parent().find('.scroller');

                    if (!flag) {
                        return false;
                    }
                    clearTimeout(timeOut);

                    flag = false;
                    timeOut = setTimeout(nextNotice, 5000);

                    if ($(CurrentScrollerDiv + ' div:visible').is(CurrentScrollerDiv + '  div:last-child')) {
                        $(CurrentScrollerDiv + ' div:visible').fadeOut(300);
                        $(CurrentScrollerDiv + ' div:first-child').fadeIn("slow", function() {
                            flag = true;
                        });
                    } else {
                        $(CurrentScrollerDiv + ' div:visible').fadeOut(300).next('div').fadeIn("slow", function() {
                            flag = true;
                        });
                    }
                    return false;
                }

                $(NextArrow).click(nextNotice);
                $(PrevArrow).click(function(event) {

                    var CurrentScrollerDiv = $(this).parent().find('.scroller');

                    if (flag) {
                        return false;
                    }
                    clearTimeout(timeOut);

                    flag = false;
                    timeOut = setTimeout(nextNotice, 5000);

                    if ($(CurrentScrollerDiv + ' div:visible').is(CurrentScrollerDiv + ' div:first-child')) {
                        $(CurrentScrollerDiv + ' div:visible').fadeOut(300);
                        $(CurrentScrollerDiv + ' div:last-child').fadeIn("slow", function() {
                            flag = true;
                        });
                    }
                    else {
                        $(CurrentScrollerDiv + ' div:visible').fadeOut(300).prev('div').fadeIn("slow", function() {
                            flag = true;
                        });
                    }
                    return false;

                });

            });

        };

    })(jQuery);


    $(document).ready(function() {
        //Blog
        $('.itBlog > div:first-child').show();

        //Scroller
        $('.scroller').Scroller();

    });

That's the problem: $(CurrentScrollerDiv + ' div:visible'). Why do you think you can concatenate a jQuery object with a string? — Felix Kling
– Felix Kling, Commented Sep 19, 2011 at 11:08
@Felix Kling - sorry, I'm still learning. What is wrong with this kind of usage? — Iladarsda
– Iladarsda, Commented Sep 19, 2011 at 11:22
@NewUser: You can find out if you perform some basic debugging with breakpoints. This should be a first step before resorting to asking here. — Lightness Races in Orbit
– Lightness Races in Orbit, Commented Sep 19, 2011 at 11:24

Lightness Races in Orbit · Accepted Answer · 2011-09-19 11:08:57Z

16

To build selectors from existing objects, use the second parameter of $:

$('div:visible', CurrentScrollerDiv)

Or the find function:

CurrentScrollerDiv.find('div:visible');

CurrentScrollerDiv is not a string so it cannot be concatenated with a string to generate a string-based selector argument.

jQuery( selector, [ context ]  )
    jQuery( selector, [context] )    <-- you want this one, and
    jQuery( element )                    `selector` is a string
    jQuery( elementArray )
    jQuery( jQuery object )
    jQuery()
jQuery( html, [ ownerDocument ]  )
    jQuery( html, [ownerDocument] )
    jQuery( html,props )
jQuery( callback  )
    jQuery( callback )

answered Sep 19, 2011 at 11:08

Lightness Races in Orbit

387k77 gold badges670 silver badges1.1k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Iladarsda Over a year ago

CurrentScrollerDiv is not a string so it cannot be concatenated with a string to generate a string-based selector argument.

- that very useful tip. I did not realize that before. I was sure that this will return string(pure text).

Cyprus106 Over a year ago

Learned something new today, I always thought it would convert to string too.

Matt Ball · Accepted Answer · 2011-09-19 11:09:15Z

3

This is the problematic line:

if ($(CurrentScrollerDiv + ' div:visible').is(CurrentScrollerDiv + '  div:last-child')) {

You using string concatenation on CurrentScrollerDiv, which .toString() s the variable, which is not at all what you want. Don't try to string concatenate jQuery objects or DOM elements. Use jQuery's .find() instead:

if (CurrentScrollerDiv.find('div:visible').is(CurrentScrollerDiv.find('div:last-child')) {

There is, however, almost certainly a more efficient way to write that if statement.

answered Sep 19, 2011 at 11:09

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

Comments

Dmitry · Accepted Answer · 2011-09-19 11:10:44Z

2

Here is wrong selector:

var CurrentScrollerDiv = $(this).parent().find('.scroller');

$(CurrentScrollerDiv + ' div:visible')

fix

var CurrentScrollerDiv = $(this).parent().find('.scroller');
$('div:visible', CurrentScrollerDiv);

answered Sep 19, 2011 at 11:10

Dmitry

90210 silver badges14 bronze badges

Collectives™ on Stack Overflow

Uncaught Syntax error, unrecognized expression: [object Object]

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related