In
this post jQuery hierarchy selector Example, we
shall see the
various hierarchy selectors available in jQuery, and how to use them to
filter out elements.
Running
the Sample
To
run the example code at your desk, create a new Asp.net page; copy the entire
code below, change reference of the jQuery & Stylesheet files to point to
your local directory.
Build and run the application.
Click on the btnHierarchySelector button to view the selector Outputs.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>jQuery
Hierarchy Selector</title>
<script
type="text/javascript"
src="JavaScript/jquery-1.7.2.js"></script>
<script
type="text/javascript"
src="JavaScript/jquery-ui-1.8.21.custom.min.js"></script>
<link
type="text/css"
href="Stylesheet.css"
rel="Stylesheet" />
<script
type="text/javascript"
language="javascript">
$(document).ready(function() {
$('#btnHierarchySelector').click(function(event) {
event.preventDefault();
//
//
Hierarchy - First
$("input:first").each(function() {
alert('Hierarchy - First:' + $(this).attr('id'));
});
//
//
Hierarchy - Last
$("input:last").each(function() {
alert('Hierarchy - Last:' + $(this).attr('id'));
});
//
//
Hierarchy - Even
$("input:even").each(function() {
alert('Hierarchy - Even:' + $(this).attr('id'));
});
//
//
Hierarchy - Odd
$("input:odd").each(function() {
alert('Hierarchy - Odd:' + $(this).attr('id'));
});
//
//
Hierarchy - Only child
$("input:only-child").each(function() {
alert('Hierarchy - Only child:' + $(this).attr('id'));
});
//
//
Hierarchy - Parent
alert('Hierarchy
Child:' + $("#tdName").attr('id'));
alert('Hierarchy
Parent:' + $("#tdName").parent().attr('id'));
//
//
Hierarchy - nth Child
alert('Hierarchy
Parent:' + $("#trName").attr('id'));
alert('Hierarchy
1st Child:' + $("#trName
td:nth-child(1)").attr('id'));
alert('Hierarchy
2st Child:' + $("#trName
td:nth-child(2)").attr('id'));
//
//
Hierarchy - Index
alert('Hierarchy
Parent:' + $("#trName").attr('id'));
$("#trName
td:gt(0)").each(function() {
alert('Hierarchy - td with Index > 0:' + $(this).attr('id'));
});
//
//
Hierarchy - Empty (No Children)
alert('Hierarchy
Parent:' + $("#trName").attr('id'));
$("td:empty").each(function() {
alert('Hierarchy - Empty (No Children):' + $(this).attr('id'));
});
//
//
Hierarchy - First TextBox
alert('Hierarchy
- First TextBox:' + $("input[type=text]:first").attr('id'));
//
//
Hierarchy - Last TextBox
alert('Hierarchy
- Last TextBox:' + $("input[type=text]:last").attr('id'));
//
//
Hierarchy - First Dropdown
alert('Hierarchy
- First Dropdown:' + $("select:first").attr('id'));
//
//
Hierarchy - Last Dropdown
alert('Hierarchy
- Last Dropdown:' + $("select:last").attr('id'));
});
});
</script>
</head>
<body>
<form id="frmSelector"
runat="server">
<table>
<tr id="trName">
<td id="tdNameLabel">Name</td>
<td id="tdName">
<asp:TextBox
ID="txtName"
CssClass="RedText"
runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>Age</td>
<td>
<asp:TextBox
ID="txtAge"
Enabled="false"
CssClass="FocusText"
runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>Password</td>
<td>
<asp:TextBox
ID="txtPassword"
CssClass="FocusText"
TextMode="Password"
runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>Address</td>
<td>
<asp:TextBox
ID="txtAddress"
CssClass="FocusText"
TextMode="MultiLine"
runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>Gender</td>
<td>
<asp:DropDownList
ID="drpGender"
CssClass="RedText"
runat="server">
<asp:ListItem Value="" Text="-Select-"></asp:ListItem>
<asp:ListItem Value="M" Text="Male"></asp:ListItem>
<asp:ListItem Value="F" Text="Female"></asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>Country</td>
<td>
<asp:DropDownList
ID="drpCountry"
runat="server">
<asp:ListItem Value="" Text="-Select-"></asp:ListItem>
<asp:ListItem Value="U" Text="USA"></asp:ListItem>
<asp:ListItem Value="K" Text="UK"></asp:ListItem>
<asp:ListItem Value="I" Text="India"></asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>Status</td>
<td>
<asp:RadioButtonList
ID="radListStatus"
CssClass="RedText"
RepeatDirection="Horizontal"
runat="server">
<asp:ListItem Value="A" Text="Active"></asp:ListItem>
<asp:ListItem Value="I" Text="InActive"></asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
<tr>
<td>Skill
sets</td>
<td>
<asp:CheckBoxList
ID="chkListSkills"
CssClass="RedText"
RepeatDirection="Horizontal"
runat="server">
<asp:ListItem Value="A" Text="Asp.Net"></asp:ListItem>
<asp:ListItem Value="C" Text="C#"></asp:ListItem>
<asp:ListItem Value="S" Text="SQL Server"></asp:ListItem>
<asp:ListItem Value="O" Text="Oracle"></asp:ListItem>
<asp:ListItem Value="M" Text="My SQL"></asp:ListItem>
</asp:CheckBoxList>
</td>
</tr>
<tr>
<td>Icon</td>
<td>
<img
src="images\Users.JPG"
id="imgUsersIcon"
border="1"
class="FocusText" />
</td>
</tr>
<tr>
<td>Profile
Link</td>
<td>
<asp:HyperLink
id="lnkProfile"
runat="server"
NavigateUrl="#"
Text="View Profile"></asp:HyperLink>
</td>
</tr>
<tr>
<td>Hidden
Text</td>
<td>
<input type="hidden" id="txtHidden" />
</td>
</tr>
<tr>
<td>Submit</td>
<td colspan="2">
<asp:Button
ID="cmdSubmitButton"
Text="Save"
runat="server"></asp:Button>
</td>
</tr>
<tr>
<td>Reset</td>
<td colspan="2">
<input type="reset" id="cmdResetButton" value="Reset" />
</td>
</tr>
<tr>
<td>Button</td>
<td colspan="2">
<input type="button" id="cmdButton" value="Button" />
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td colspan="2">
<asp:Button
ID="btnTypeSelector"
Text="Type Selector"
runat="server"></asp:Button>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Button
ID="btnHierarchySelector"
Text="Hierarchy Selector"
runat="server"></asp:Button>
</td>
</tr>
<tr>
<td id="tdEmpty1"></td>
<td id="tdEmpty2"> </td>
</tr>
</table>
</form>
</body>
</html>
Related Post
jQuery
hierarchy selector
jQuery
first selector
jQuery
last selector
jQuery
even selector
jQuery
odd selector
jQuery
only-child selector
jQuery
parent selector
jQuery
nth-child selector
jQuery
index :gt selector
jQuery
empty selector
jQuery
first selector for Textbox
jQuery
last selector for Textbox
jQuery
first selector for Dropdown
jQuery
last selector for Dropdown
jQuery
hierarchy selector Example
