Is it possible to have jQuery objects inside of regular javascript objects?

Question

I've built a carousel recently and I've been trying to clean up the code by splitting everything into smaller function and such. I've been playing around with the idea of having all of my variables (and perhaps functions?) into a Javascript object so that its separated from all of the other code in the file (its a VERY big file :p).

here is a small snippet of code I was messing with

$('document').ready(function(){

// an object to hold all of my variables and methods that deal with the infinite carousel
var carouselVars = {
      carouselBgWrapper: $('#carousel_bg_wrapper'),
      carouselItems : $('#carousel_ul li'),                 // a jquery object that holds all the li elements in the carousel ul
      carouselWrapper : $('#carousel_wrapper'),         // a jquery object that holds the carousel wrapper div
      carouselUl : $('#carousel_ul'),                       // a jquery object that holds the carousel ul

      //kept getting firebug error "ReferenceError: carouselWrapper/carouselItems is not defined

              //totalItems : carouselItems.length,
      //itemWidth : carouselItems.eq(1).outerWidth(true),   // size of second item plus its 8px left margin
      //visibleImages : Math.ceil( carouselWrapper.width()/itemWidth ),     // number of items visible at a time ???starting to question this math
      //scrollDistance : itemWidth*visibleImages,                   // number of pixels that need to be animated over when moving left or right
      //neededImages: visibleImages - remainingImages,      // number of images that must be added to the last page to give us a full page

      scrollSpeed : 1200,                                                   // animation duration of the carousel slide (in milliseconds)
      currentPage : 1,                                                      // default current page to 1
      moveRight: function(){
        console.log("move right --- carouselVars");
      }
}

carouselVars.totalItems = carouselNS.carouselItems.length;                                              // the number of li's in the list (will not change)
carouselVars.itemWidth = carouselVars.carouselItems.eq(1).outerWidth(true);                     // width of second item plus its 8px left margin
carouselVars.visibleItems = Math.ceil( carouselVars.carouselWrapper.width()/carouselVars.itemWidth );       // number of items visible at a time
carouselVars.moveDistance = carouselVars.itemWidth*carouselVars.visibleImages;                  // number of pixels to animate over when moving left or right
carouselVars.pages = Math.ceil( carouselVars.totalItems/carouselVars.visibleItems );                // the total number of pages in the carousel
carouselVars.remainingItems = carouselVars.totalItems%carouselVars.visibleItems;                    // number of images that are on last page (might be less than 4)
carouselVars.neededItems = carouselVars.visibleItems - carouselVars.remainingItems;             // number of images that must be added to the last page to give us a full page


carouselNS.carouselBgWrapper.on('click','#carousel_next_item',carouselVars.moveRight());        // move carousel right on mouse click
carouselNS.carouselBgWrapper.on('click','#carousel_prev_item',carouselVars.moveLeft());     // move carousel right on mouse click
});

Sorry if the code is formatted rather poorly.

What happens when I try to use this code, is that firebug spits out the following error

"ReferenceError: carouselItems not defined"

I assume this problem is occurring because I'm trying to get the number of list items in the ul that is being referred to by carouselItems : $('#carousel_ul li') using totalItems = carouselItems.length.

To try and side step the issue, I tried adding the variables to the object individually, and it doesn't look like I'm getting errors, but at the same time, it looks horribly bloated and ugly to me.

Is there a way to use jQuery object methods within a regular Javascript object? Also, is what I'm doing even practical?

Can you give the full code, beause jou dident give the piece that defines "carouselNS". btw: JQuery objects are just plain javascript objects (theres noting special about them) jQuery is not magic it's javascript — beardhatcode
– beardhatcode, Commented Dec 22, 2012 at 23:07
The error message isn't about the length property, it's complaining that there is no property carouselNS.carouselItems. Should that be carouselVars.carouselItems.length? .length works for jQuery objects, it returns the number of elements that the selector matched. — Barmar
– Barmar, Commented Dec 22, 2012 at 23:25
instead of totalItems : carouselItems.length, try totalItems : this.carouselItems.length, — kennypu
– kennypu, Commented Dec 22, 2012 at 23:27
ugh, oops, I meant to change that carouselNS.carouselItems to carouselVars.carouselItems. Sorry about that, I'm sure that caused quite some confusion. — NickG
– NickG, Commented Dec 23, 2012 at 20:55

Community · Accepted Answer · 2017-05-23 12:18:46Z

1

This problem has nothing to do with jQuery; it's simply because what you want to do isn't possible. You can't reference an object during initialisation. See this answer: https://stackoverflow.com/a/12789163/551093

But you can reference it after. Example:

var carouselVars = {
      carouselBgWrapper: $('#carousel_bg_wrapper'),
      carouselItems : $('#carousel_ul li'),                 // a jquery object that holds all the li elements in the carousel ul
      carouselWrapper : $('#carousel_wrapper'),         // a jquery object that holds the carousel wrapper div
      carouselUl : $('#carousel_ul'),                       // a jquery object that holds the carousel ul

      ...
}

carouselVars.totalItems = carouselVars.carouselItems.length;

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Dec 22, 2012 at 23:26

Christian

19.8k3 gold badges57 silver badges70 bronze badges

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

1 Comment

NickG Over a year ago

I see, thank you very much. I wasn't sure if there was any way to get around referencing the jQuery objects after, but it appears there is none. Thanks for the clarification.

Collectives™ on Stack Overflow

Is it possible to have jQuery objects inside of regular javascript objects?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related