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" >
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
No comments:
Post a Comment