api.jquery.com/entries/children.xml at 64814811d7e3569f95cfac83768b1e46fa9f34b1 · esx/api.jquery.com · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<?xml version="1.0"?>
<entry type="method" name="children" return="jQuery">
  <title>.children()</title>
  <signature>
    <added>1.0</added>
    <argument name="selector" optional="true" type="Selector">
      <desc>A string containing a selector expression to match elements against.</desc>
    </argument>
  </signature>
  <desc>Get the children of each element in the set of matched elements, optionally filtered by a selector.</desc>
  <longdesc>
    <p>Given a jQuery object that represents a set of DOM elements, the <code>.children()</code> 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 <code>.children()</code> method differs from <code><a href="http://api.jquery.com/find/">.find()</a></code> in that <code>.children()</code> only travels a single level down the DOM tree while <code>.find()</code> can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well. Note also that like most jQuery methods, <code>.children()</code> does not return text nodes; to get <em>all</em> children including text and comment nodes, use <code><a href="http://api.jquery.com/contents">.contents()</a></code>.</p>
    <p>The <code>.children()</code> method optionally accepts a selector expression of the same type that we can pass to the <code>$()</code> function. If the selector is supplied, the elements will be filtered by testing whether they match it.</p>
    <p>Consider a page with a basic nested list on it:</p>
    <pre><code>
&lt;ul class="level-1"&gt;
  &lt;li class="item-i"&gt;I&lt;/li&gt;
  &lt;li class="item-ii"&gt;II
    &lt;ul class="level-2"&gt;
      &lt;li class="item-a"&gt;A&lt;/li&gt;
      &lt;li class="item-b"&gt;B
        &lt;ul class="level-3"&gt;
          &lt;li class="item-1"&gt;1&lt;/li&gt;
          &lt;li class="item-2"&gt;2&lt;/li&gt;
          &lt;li class="item-3"&gt;3&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="item-c"&gt;C&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class="item-iii"&gt;III&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
    <p>If we begin at the level-2 list, we can find its children:</p>
    <pre><code>$('ul.level-2').children().css('background-color', 'red');</code></pre>
    <p>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.</p>
  </longdesc>
  <example>
    <desc>Find all children of the clicked element.</desc>
    <code><![CDATA[

    $("#container").click(function (e) {
      $("*").removeClass("hilite");
      var $kids = $(e.target).children();
      var len = $kids.addClass("hilite").length;

      $("#results span:first").text(len);
      $("#results span:last").text(e.target.tagName);

      e.preventDefault();
      return false;
    });
]]></code>
    <css><![CDATA[
  body { font-size:16px; font-weight:bolder; }
  div { width:130px; height:82px; margin:10px; float:left;
        border:1px solid blue; padding:4px; }
  #container { width:auto; height:105px; margin:0; float:none;
        border:none; }
  .hilite { border-color:red; }
  #results { display:block; color:red; }
  p { margin:10px; border:1px solid transparent; }
  span { color:blue; border:1px solid transparent; }
  input { width:100px; }
  em { border:1px solid transparent; }
  a { border:1px solid transparent; }
  b { border:1px solid transparent; }
  button { border:1px solid transparent; }
  ]]></css>
    <html><![CDATA[<div id="container">

    <div>
      <p>This <span>is the <em>way</em> we</span>
      write <em>the</em> demo,</p>

    </div>
    <div>
      <a href="#"><b>w</b>rit<b>e</b></a> the <span>demo,</span> <button>write
      the</button> demo,
    </div>

    <div>
      This <span>the way we <em>write</em> the <em>demo</em> so</span>

      <input type="text" value="early" /> in
    </div>
    <p>
      <span>t</span>he <span>m</span>orning.
      <span id="results">Found <span>0</span> children in <span>TAG</span>.</span>

    </p>
  </div>]]></html>
  </example>
  <example>
    <desc>Find all children of each div.</desc>
    <code><![CDATA[$("div").children().css("border-bottom", "3px double red");]]></code>
    <css><![CDATA[
  body { font-size:16px; font-weight:bolder; }
  span { color:blue; }
  p { margin:5px 0; }
  ]]></css>
    <html><![CDATA[<p>Hello (this is a paragraph)</p>

  <div><span>Hello Again (this span is a child of the a div)</span></div>
  <p>And <span>Again</span> (in another paragraph)</p>

  <div>And One Last <span>Time</span> (most text directly in a div)</div>]]></html>
  </example>
  <example>
    <desc>Find all children with a class "selected" of each div.</desc>
    <code><![CDATA[$("div").children(".selected").css("color", "blue");]]></code>
    <css><![CDATA[

  body { font-size:16px; font-weight:bolder; }
  p { margin:5px 0; }
  ]]></css>
    <html><![CDATA[<div>
    <span>Hello</span>
    <p class="selected">Hello Again</p>
    <div class="selected">And Again</div>

    <p>And One Last Time</p>
  </div>]]></html>
  </example>
  <category slug="traversing/tree-traversal"/>
  <category slug="version/1.0"/>
</entry>