Find range of elements in HTML with jquery
Many times, there is a need to find an element in your HTML/aspx page and then do some action on that element. For EX: You may want to apply some action on elements having the same class name. JQuery is very handy in such situations since it has an inbuilt function of finding elements and then executing some action on that element in the same JQuery statement. Using JQuery, We can change the appearance of filtered elements in a HTML page very easily. In this article, we will see how to find a range of JQuery elements and then execute some action on this filtered HTML elements.
JQuery Find selector
JQuery has an inbuilt function ‘find’ to filter out the elements that matches the find condition. For example below query will search for all elements (inside element having id ‘Parent') having class property as childspan
$('#Parent').find('.childspan').
find(selector)
Returns a set of element that matches the condition that is passed
Demo:
In this demo, I have declared two parent’s div and few child span elements inside these parent divs.
<div id="Parent">
<span class="childspan">Child Span-1</span><br />
<span class="childspan">Child Span-2</span>
<div id="ChildParent">
<span class="childspan">Child Span-3</span><br />
<span class="childspan">Child Span-4</span>
</div>
</div>
<div id="Parent1">
<span class="childspan">Parent 1 Child Span-1</span><br />
<span class="childspan">Parent 1 Child Span-2</span>
</div>
I have declared three JavaScript function to select different elements of my HTML page. First function ChangeParentChildColor will find all elements (span) having class ‘childspan’ inside element (div) having id Parent'. Second function selects all elements (Span) having class ‘ childspan’ inside element (div) having id ‘ChildParent’. Third function ChangeAllChildColor will search for all elements in the html page having class ‘childspan’
function ChangeParentChildColor() {
$('#Parent').find('.childspan').css('color', 'green');
}
function ChangeInnerParentColor() {
$('#ChildParent').find('.childspan').css('color', 'aqua');
}
function ChangeAllChildColor() {
$('*').find('.childspan').css('color', 'green');
}
Output:
Below is the output of all three functions. First function makes the color of first four span element green in color. Second function turns the third and fourth span element aqua in color while third function will make all the elements green in color.
Conclusion:
In this article, we saw how to change the appearance of a range of elements filtered out by JQuery find function. JQuery utility provides us with many easy to use methods to filter out the elements in a HTML page.
Note: Images used on this website
are either a production of Bhaktivedanta Book Trust(https://www.krishna.com), Iskcon
Foundation or were found in google search under "Free to use and share". If any
of the images presented here violates copyright issues or infringes anyone copyright
or are not under "Fair use", then please bring it to our notice. Read
Disclaimer for more.
Share this to your friends. One of your friend is
waiting for your share.
Related Articles
Commonly used string Functions
Call JavaScript functions from silverlight
Select range of HTML elements using Jquery slice function
Changing CSS Properties of HTML element using JQuery
Add Auto suggestion to your website using AJAX AutoCompleteExender control
Find range of elements in HTML with jquery
Trigger custom or manual postback in ASP.NET
Add, remove or toggle class of HTML control using jquery.
Post Comment