Get all Children of a Parent

Installation

CSS Selectors

$.get() Nedil Objects ($.Objs) General Selectors Attribute Selectors Child Selectors Sibling Selectors

Event Handling

on() off() trigger() $.self() $.currentEvent Events

DOM Manipulation

Common - Two ways of Usage addChild() addParent() wrapChildren() removeChild() getChildren() isChild() isParent() nextSibling() previousSibling() isSibling() childIndex()

Utilities

forEach() html() text() pos() posAbs() dim() mouse() mouseAbs() style() css() hasCSSClass() selection() convertHexRGB() cloneJSON()

Data Structures

Stack Queue Table

AJAX APIs

AJAX Request load() ajaxSubmit() toJSON()

Animation APIs

Animation Parameters Location Animation Dimension Animation Color Animation CSS Animation Paths and Easing

Widgets Creation

How to create a widget ? About Default Widgets

.getChildren( [ immediate ] ) - Get all child elements or immediate children

.getChildren() will fetch all or only immediate child elements and wrap them into Nedil Objects.

Parameters

Name	Type	Default	Possible Values	Description
immediate	Boolean	false	true / false	Setting this to true, will fetch only the direct (immediate) child elements, else will fetch all children

Returns

Name	Type	Description
Child Elements	$.Objs	Returns all the child elements wrapped to Nedil Objects

Example 1

.getChildren() gets all the children of #parent and returns as Nedil Objects. Using Chil Nedil Onjects, we style the background color of children. "style" function is explained under Utilities.

JSHTMLCSS
								$.domLoaded(function() {

			$.get("#change").on("click", function() {
			
				//get all children
				var chil = $.get("#parent").getChildren();
				
				chil.style("background-color", "red");

			});
			
		});						
						
					

						<body>

<div id="parent"> 
Parent
	<div class="child">child</div>
	<div class="child">child
		<div class="child"> Sub Child</div>
		<div class="child"> Sub Child</div>
	</div>
	<div class="child">child</div>

</div>
<br/>
<input type="button" id="change" value="Get #parent's all children and change color" />

</body>
					

									#parent {
			display : inline-block;
			background-color : #fff;
			border : 2px solid red;
			padding : 10px;
		}
		
		.child {
			padding : 10px;
			margin : 5px;
			background-color : #0af;
			border : 2px solid #000;
		}
		
		
					

Result

Example 2

.getChildren() can also be used to fetch only the immediate (direct) children. Following example takes only the immediate children of #parent and changes their background color.

JSHTMLCSS
								$.domLoaded(function() {

			$.get("#change").on("click", function() {
			
				//get only immediate children
				var chil = $.get("#parent").getChildren(true);
				
				chil.style("background-color", "red");
				
				
			});
			
		});						
						
					

						<body>

<div id="parent"> 
Parent
	<div class="child">child</div>
	<div class="child">child
		<div class="child"> Sub Child</div>
		<div class="child"> Sub Child</div>
	</div>
	<div class="child">child</div>

</div>
<br/>
<input type="button" id="change" value="Get #parent's immediate children and change color" />

</body>
					

										#parent {
			display : inline-block;
			background-color : #fff;
			border : 2px solid red;
			padding : 10px;
		}
		
		.child {
			padding : 10px;
			margin : 5px;
			background-color : #0af;
			border : 2px solid #000;
		}
		
		
					

Result