Chrome dev tools display of printing array of jQuery objects to the screen

Question

I've the the following sample code with a fiddle here JS

   $(document).ready(function () {
                var bKids = $('.contained').find('button');
                var pKids = $('.contained').find('p');
                console.log('this is from bKids: ' + bKids.length)
                console.log('this is from pkids: ' + pKids.length);
                console.log(bKids);
                console.log(pKids);
            });

HTML

<div class="container">
        <div class="contained">
        <p>first child p tag</p>
        <p>second child p tag</p>
        <p>third child p tag</p>
        </div></div>

When I open up Chrome dev tools (and I assume other dev tools eg Firebug) if I inspect the bKids object I see that there are no selectors and the first property in the object is prevObject. In the pKids object, we have an array of p tags inside a div, and before the prevObject property there are three p's. What part of the jQuery object is this exactly, and if I wanted to refer to it by a property name, ie context, selector, etc. how could I do it?

Answer 1

The properties you're looking at/for, I gather, are the numbered properties containing the elements you're looking to select with the jQuery object - as in, any button elements for bKids and any p elements in pKids .

The current elements of a jQuery object can be accessed via the object's .get() method:

pKids.get()

will return an array of HTMLElement objects (your p elements). You can use pKids.get(n) to retrieve just one of these elements by array index. You could also access a single HTMLElement by its index as pKids[n]