jquery object inside an object literal

Question

i am trying not to repeat the selector and get to its children via a the same objects parentElment declared variable.

I tried:

testimonialsBelt={
 parentElment:$(".testimonialsCntnr ul"),
 childrenElem:this.parentElment.children().length
}

I also tried:

testimonialsBelt={
 parentElment:$(".testimonialsCntnr ul"),
 childrenElem:$("testimonialsBelt.parentElment").children().length
}

but i keep on getting a undefined when calling alert(testimonialsBelt.childrenElem).

1. is there anyway to get the jquery object with object literals?
   
   
2. What is the rule? when can i use this and when must i have the full path? (in this case testimonialsBelt.parentElment).

i am trying to have all these variables in one object called testimonialsBelt. i know i can do this with loose javaScript. Thanks

Answer 1

The problem is you cannot reference parentElement because it is not in scope, and technically doesn't exist anyway since it is part of an object assignment.

You can get around your scope issue by returning the object you want from an anonymous function:

testimonialsBelt = (function() {
 var parentElement = $('.testimonialsCntnr ul');
 return { parentElement: parentElement, childrenElem: parentElement.children().length }
}());

Answer 2

In object literals, you can only use this to refer to the object that you're declaring inside of a function. Try the following:

var testimonialsBelt = {
    parentElment: $(".testimonialsCntnr ul"),
    childrenElem: function() {
        return this.parentElment.children().length;
    }
};

The difference in calling childrenElem is that instead of using alert(testimonialsBelt.childrenElem), you would instead have alert(testimonialsBelt.childrenElem()).

Otherwise, this refers to the current scope that you are in (typically window if you are declaring the object literal as a global).

Addressing your edit: I'm not sure what you mean by "loose javascript," but I assume you mean as simple as possible. In which case, you can try the following, although I'm not a big fan of the method. It's more verbose, but is easy to understand.

var testimonialsBelt = {
    parentElment: $(".testimonialsCntnr ul")
};
testimonialsBelt.childrenElem = parentElment.children().length;

This gives you an object where childrenElem is static (it doesn't change) and avoids calling $(".testimonialsCntnr ul") twice. However, if you expect $(".testimonialsCntnr ul").children() to change, then you will need to use my first example.

Answer 3

In JavaScript (not ECMAScript) you can use this:

testimonialsBelt={
        parentElment:#1=$(".testimonialsCntnr ul"),
        childrenElem:#1#.children().length
}