Javascript target child element by class

.children[ [selector ] ]Returns: jQuery

Description: Get the children of each element in the set of matched elements, optionally filtered by a selector.

• version added: 1.0.children[ [selector ] ]

  • selector

    A string containing a selector expression to match elements against.

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. Note also that like most jQuery methods, .children[] does not return text nodes; to get all children including text and comment nodes, use .contents[].

The .children[] method optionally accepts a selector expression of the same type that we can pass to the $[] function. If the selector is supplied, the elements will be filtered by testing whether they match it.

Consider a page with a basic nested list on it:

  I
      A
          1
          2
          3
      C
  III

If we begin at the level-2 list, we can find its children:

$[ "ul.level-2" ].children[].css[ "background-color", "red" ];

The result of this call is a red background behind items A, B, and C. Since we do not supply a selector expression, all of the children are part of the returned jQuery object. If we had supplied one, only the matching items among these three would be included.

  children demo
  p, span, em, a, b, button {
    border: 1px solid transparent;
  
    This is the way we
      write the demo,
    write the demo, write
    This the way we write the demo so
     in
    the morning.
    Found 0 children in TAG.
$[ "#container" ].click[function [ event ] {
  $[ "*" ].removeClass[ "hilite" ];
  var kids = $[ event.target ].children[];
  var len = kids.addClass[ "hilite" ].length;
  $[ "#results span" ].first[].text[ len ];
  $[ "#results span" ].last[].text[ event.target.tagName ];

  children demo
  
Hello [this is a paragraph]
Hello Again [this span is a child of the a div]
And Again [in another paragraph]
And One Last Time [most text directly in a div]
$[ "div" ].children[].css[ "border-bottom", "3px double red" ];

  children demo
  
  Hello Again
  And Again
$[ "div" ].children[ ".selected" ].css[ "color", "blue" ];