Better understanding of jQuery’s .children and .find

      For those with a basic understanding of the jQuery’s methods .children and .find, we will take a deeper look into the .children and .find methods and the jQuery object that they create. jQuery api desctiption of .children:

      Given a jQuery object that represents a set of DOM elements, the .children() method allows us to search through the children of these elements in the DOM tree and construct a new jQuery object from the matching elements. The .children() method differs from .find() in that .children() only travels a single level down the DOM tree while .find() can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well.

      Notice that I have bolded the line “construct a new jQuery object.” This is extremely important because despite the fact that a call to console.log($(‘body’).children(‘.list’)) will log to the console something that looks very similar to an array, the result is not an array but a jQuery object. This means that even though the following code would still log out the first item in that jQuery object, you would not be able to use that item to call a jQuery function on it.

console.log($(‘body’).children(‘.list’)[0]); logs out <div class="test" style="border:0px"></div>
console.log ($(‘body’).children(‘.list’)[0].attr(‘style)); logs out “TypeError: undefined is not a function.”

      We will be using the following html doc for demonstration:

        <div class="test" style="border:0px"></div>
        <div class="test" style="border:10px"></div>
        <div class="test" style="border:15px"></div>
        <div class="test" style="border:20px"></div>

      This happens because despite the .children producing an “array-like” object that object is not an array but a jQuery object. This can be further demonstrated by:

console.log ($(‘body’).children(‘.list’).attr(‘style’)); which logs out  “border:0px“ 

the value of the first member of the new jQuery object.

      Now that we have seen the ways in which reaching the items inside this jQuery item doesn’t work, let’s look at ways that do work. If you are trying to loop through the jQuery object you can use jQuery’s .each method which was designed to iterate through jQuery object .each.

      If you just want to reach a specific element, then you have a couple of options (these options work for both .children and .find):

  1. You can use an individual class or id identifier to the specific element you are trying to reach
  2. If the item is either in the beginning or end of the jQuery object you could use jQuery’s .first and .last methods

    $(‘body’).children(‘.list’).first().attr(‘style’);     logs  -> border:0px
    $(‘body’).children(‘.list’).last().attr(‘style’);  logs ->  border:20px
  3. Or you can use jQuery’s .eq() method .eq which works very similarly to using the regular Javascript array notation

    $(‘body’).children(‘.list’).eq(2).attr(‘style’);   logs ->  border:15px

      As long as you are aware that despite looking like arrays, the lists produced by jQuery .find and .children methods are jQuery objects with their own properties and have to be treated differently from regular arrays.

Paulo Diniz