Finding first level child of element type at any level in JQuery
I am trying to find the first level children of an element at any depth.
For example, I have an element fieldset
that has some children, including other elements of a field set; I only want to find elements that are in the first set of fields, not the second.
In other words, I want all the children of the parent set, but not those children from any nested fields.
With this HTML in mind:
<fieldset id='root'>
<div>
<div>
<span>Test1</span>
<span>Test2</span>
</div>
<span>Test3</span>
</div>
<fieldset>
<div>
<span>Test4</span>
<span>Test5</span>
<span>Test6</span>
</div>
</fieldset>
</fieldset>
And I'm doing $("#root").find("span")
, and it finds all the gaps, but I just want to find Test1
, Test2
,Test3
How do I do this in jQuery?
source to share
You can do it with functions filter()
and parents()
jQuery.
You can check my violin.
http://jsfiddle.net/ebilgin/9ov9kaaL/
Edit: Code for future use:
$("#root").find("span").filter( function () {
if ( $(this).parents("fieldset").length ) {
if ( $(this).parents("fieldset").parents("fieldset").length ) {
return false;
}
return true;
}
}).css("color", "#CCC");
source to share
I would suggest:
// select the elements you want to find,
// use filter() to filter out the elements you don't want:
$('span').filter(function() {
// if the closest ancestor <fieldset> element to
// the <span> you're looking for has the id of 'root'
// this evaluates to true (is() returns a Boolean);
// if the evaluation is true the current element is retained
// in the collection, if false it discarded:
return $(this).closest('fieldset').is('#root');
// using css() to style the retained elements for verification:
}).css('color', 'red');
$('span').filter(function() {
return $(this).closest('fieldset').is('#root');
}).css('color', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post">
<fieldset id='root'>
<div>
<div>
<span>Test1</span>
<span>Test2</span>
</div>
<span>Test3</span>
</div>
<fieldset>
<div>
<span>Test4</span>
<span>Test5</span>
<span>Test6</span>
</div>
</fieldset>
</fieldset>
</form>
Literature:
source to share
Any of these selectors work with your existing HTML:
//selects spans of #root first child:
$('#root > *:first span');
//selects spans of #root children that aren't fieldsets:
$('#root > :not(fieldset) span').css('background', 'yellow');
The second will work if it fieldset
is the second or first child.
Excerpt:
$('#root > *:first span').css('color', 'red');
$('#root > :not(fieldset) span').css('background', 'yellow');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id='root'>
<div>
<div>
<span>Test1</span>
<span>Test2</span>
</div>
<span>Test3</span>
</div>
<fieldset>
<div>
<span>Test4</span>
<span>Test5</span>
<span>Test6</span>
</div>
</fieldset>
</fieldset>
source to share
var children = $('#root').children('div').children('span').css("background-color", "red" );
See this jsbin: http://jsbin.com/yubafe/edit?html,js,console,output
source to share
You can use css pseudo-class: not and css class for your code to filter this div:
HTML
<fieldset id='root'>
<div>
<div>
<span>Test1</span>
<span>Test2</span>
</div>
<span>Test3</span>
</div>
<fieldset>
<div class="filter">
<span>Test4</span>
<span>Test5</span>
<span>Test6</span>
</div>
</fieldset>
JQuery
$("#root div:not(.filter) span").css("color","red");
You can test here:
source to share