I am using jQuery selector to get the values of all CMS ponents on the page using $('div.cmsponent') but how can I test this to see if am actually getting the list of poents on the page.

I use:

var temp = $('div.cmsponent');
alert(temp);

and result that I get is [object OBJECT] and so how can I test this ? and how can I get values of the object and its properties.

I am using jQuery selector to get the values of all CMS ponents on the page using $('div.cmsponent') but how can I test this to see if am actually getting the list of poents on the page.

I use:

var temp = $('div.cmsponent');
alert(temp);

and result that I get is [object OBJECT] and so how can I test this ? and how can I get values of the object and its properties.

• javascript
• jquery

Share Improve this question Follow asked May 4, 2010 at 14:21 RachelRachel 104k119119 gold badges273273 silver badges367367 bronze badges 0

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 1

$() returns a jQuery wrapper object, whose contents is usually a list of DOM elements, along with properties and methods that apply to those elements.

If you want to get an element, you can access them using array-style indexes or the get() method:

alert(temp[0].tagName);     // Fetch the first element, alert the `tagName`
alert(temp.get(1).tagName); // Fetch second element, alert the tagName

To check to see how many elements the result contains, you can use .length, just like you would on an array or collection/nodelist:

alert(temp.length);  // Alerts number of elements found.

Here is a javascrip include that will enable you to view object structure and information. EX: dump(temp, true);

http://wwwgrow..au/files/javascript_dump.cfm

Well it depends on what you want to know about the matched objects. Some examples:

var temp = $('div.cmsponent');
alert(temp.length); // number of matched elements

// Alert each id attribute of every matched element
$(temp).each(function(index) {
    alert(index + ': ' + $(this).attr("id"));
 });

var temp = $('div.cmsponent').length;
alert(temp);

If by "how can I test this", you meant "how can I write a unit test for this?", the answer is that you shouldn't. You didn't write jQuery, so you should assume it's already been unit-tested. (If there were a problem with jQuery, though, you can write integration tests would catch this.)

On the other hand, if you meant "how can I sanity-check what jQuery is telling me to make sure I didn't goof on the inputs?", there are a few ways:

• Check that .length matches the expected number of items.
• Check that an XPath query for the same nodes ("//div[@class='cmsponent']") returns the same number of values.
• Check that the content of the Nth node matches what you expect.

Otherwise, it's probably best to use a third-party tool like Firebug.

If all you want to do is test if your code is doing what you expect, Firebug is your friend here. It will give you a console to type a mand like $('div.cmsponent') and then interactively explore the results that are returned by it.

You can then mouseover each item that your mand returned and it will be highlighted on the page, so you can see which item the mand returned, and if those items are the ones you expected/wanted.