Bambang pramusintha

How To Specifying Elements in a Hierarchy

In Hierarchy, JQuery, Plugin, Website Tutorial, Wordpress Tutorial on July 27, 2012 at 9:40 am

As the before topic says that jQuery is great at letting us select a set of elements. But what if you want to select one set in a page, but not another?
Say you have some

ele

ments in a

element that you want to select, but you don’t want to select any

<p> elements outside the <div> element.

One way of selecting the <p> elements we want is by specifying a selector hierarchy. For example, we can ask jQuery to select only those <p> elements that appear inside a <div> element, which itself appears in a <body> element, like this:

$(‘body div p’)

This tutorial will help us to make the selection that we want, and it will also let us change the style class of the selected elements when the user clicks a button, using the following code:

$(‘body divp’).toggleClass(‘striped’);

Steps to Select Elements in a Hierarchy are :

enter the code to add the jQuery library and add four <p> elements in a <div> element and one outside the <div> element, so total five <p> elements.

 

<html>
<head>

<title>Selecting elements in a hierarchy</title>

<script type=”text/javascript”src=”jquery-1.5.1.js”>
</script>

</head>
<body>

<h1>Selecting elements in a hierarchy</h1>

<div>
<p>This is paragraph 1.</p>

<p>This is paragraph 2.</p>

<p>This is paragraph 3.</p>

<p>This is paragraph 4.</p>

</div>

<p>This is paragraph 5.</p>

</body>
</html>

4. Add the code to select the first four paragraphs only and toggle their background to cyan.

<html>
<head>

<title>Selecting elements in a hierarchy</title>

<script type=”text/javascript”src=”jquery-1.5.1.js”>
</script>

<script type=”text/javascript”>
function toggle( )
{
$(‘body div p’).toggleClass(‘striped’);
}
</script>

<style>
p.striped {
background-color: cyan;
}
</style>

</head>
<body>

<h1>Selecting elements in a hierarchy</h1>

<div>
<p>This is paragraph 1.</p>

<p>This is paragraph 2.</p>

<p>This is paragraph 3.</p>

<p>This is paragraph 4.</p>

</div>

<p>This is paragraph 5.</p>

<form>
<input type = “button” value=”Toggle Class” onclick=”toggle( )”

</input>
</form>

</body>
</html>

5. Save the file and open it in a browser and thats it.

6. Click the Toggle Class button.

7. The Output is as follows:

Specifying Elements in Hierarchy Sample Picture

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: