Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Filtering elements with jQuery

In this article we will see what they are and how to work with the filter functions available natively on jQuery library.

Often, when working with the jQuery library, we need to filter out certain elements. Although you can use CSS selectors to make much of these filters, there are native functions of simpler syntax that can make this task even easier.

In this article, each function is presented individually, together with a usage example and discussion of the results. To facilitate understanding, only one HTML structure is used for all functions. The reader can then save the contents of Listing 1 as an html file extension and, where indicated, enter the code listings of each sample for testing.

Note 1: For the development of the examples in this article, it is necessary that the reader knows, at least primarily, the operation of the jQuery library and learn how to use it in a web page.

Listing 1: HTML Structure used

<html>
<head>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$("#container").children().eq(2).addClass("highlights");
		});
	</script>
	<style type="text/css">
		#div1{
			border:solid 1px;
			width:100px;
			height:20px;
		}
		#p1{
			border:solid 2px green;
			width:150px;
			height:20px;
		}
		#div2{
			border:solid 1px red;
			width:200px;
			height:20px;
		}
		.destaque{
			background-color:yellow;
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="div1">
			<span>div1</span>
		</div>
		<p id="p1">
			p1
		</p>
		<div id="div2"></div>
	</div></body>
<html>

We applied simple styles to elements within the div "container" just to differentiate them from one another visually.

eq

The function eq () selects a single element in a list according to their index. There are two possible call: passing an index positive or negative. With the passage of a positive value as a parameter, the element is selected by its actual content in the list, now with negative parameter, the selection is made to count backwards. For example, passing the value -1, the selected element would be the last.

Note 2: Although the count starting at zero, the last element in the negative score is -1, because it makes no sense to use a negative value to zero.

In the following listing, select the child element of the div "container" that has the index 1, I mean, the second element, and add it to the CSS class "highlight".

Listing 2: Example usage of the function eq

$("#container").children().eq(1).addClass("highlights");

Opening the file in the browser, the paragraph "p1" should have the background color changed to yellow.

first

Suggestive name, the function first () does not require any parameters and selects the first element of a list. For example, in the case of child elements of the div "container", the selected element using this function would be the div "div1". In the following listing we see this example in practice, where the background of "div1" is changed to yellow.

Listing 3: Example usage of the function first

$("#container").children().first().addClass("highlights");

last

Similar to the previous function, but returns the last element of the filtered list. In this case, applying this function to the child elements of the div "container", the result would be the div "div2", the last of the list.

Listing 4: Example usage of the function last

$("#container").children().last().addClass("highlights");

With this the "div2" must have its background changes to yellow.

is

This function, unlike those presented so far, do not select an element, it returns true or false if a condition is met. This condition indicates that the filtered component has a certain feature or not.

Is passed a filter parameter which identifies the element, for example, by tag type. Although not complete understanding becomes easier when the code seen in practice.

In Listing 5, we filter the first child element of the div "container" and check if it is a div and depending on the outcome, she added the class "highlight". It is expected that the result is true.

Listing 5: Example usage of the function is

var elemento = $("#container").children().first();
if($("#container").children().is("div"))
	elemento.addClass("highlights");

not

not () function is used to exclude certain group of elements in a list according to a filter set. For example, the list of child elements of the div "container" is composed of two divs and a paragraph. If we apply the filter "div", not in the function, we get the list of elements of type div removed, ie only the paragraph.

Consider this example in practice, facilitating comprehension.

Listing 6: Example usage of the function not

$(function(){
	$("#container").children().not("div").addClass("highlights");
});

As seen in the above code, from the list of child elements of the div "container" filter out those who do not meet the filter "div", ie, that are not of this type, and add them to the CSS class " Featured. "

Opening the file in the browser, we find that paragraph (central) had the color of the background set to yellow.

has

The nomenclature of this function is quite suggestive. The English term "has" or "has" in Portuguese, indicates that the function returns a list of elements that HAVE / HAVE a particular child element.

To exemplify, we filter the child elements of the div "container" that contains one child of type span. Easily realize that the only selected element would be the first div, the "div1". The following code example shows this in practice.

Listing 7: Example usage of the function has

$(function(){
	$("#container").children().has("span").addClass("highlights");
});

In this case, only the first div will have the background color changed.

Conclusion

The functions presented here are not the only from library, but are the most used and more easily understood. I thank the reader's attention. See you next time.



Microsoft MVP, Bachelor in Science And Technology, Editor and Consultant at DevMedia with more than 7 years of experience in software development.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login