CODEWITHSUNDEEP
javascriptjqueryobject
NickG
NickG

Reputation: 23

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

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?

Upvotes: 0

Views: 130

Answers (1)

Christian
Christian

Reputation: 19750

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;

Upvotes: 1

Related Questions