Filtering allows you to refine the elements that you are selecting. Filters are very handy when you're trying to target just one, or a few, elements within your DOM. If you have a static HTML document, it is easy to adjust the HTML. But in cases where the DOM changes with every page request or load, you need to use a dynamic front-end language such as JavaScript to add formatting on the fly. A filter is defined by a colon that follows the actual filter: :filter. As of jQuery 1.7.1, jQuery contains many different filters. I give real-world examples of the most common.
- Creating Zebra-Striped Tables Using The Even and Odd Filter
Zebra striping is a common practice to make table rows easier to read by adding a lighter gray background color to each even or odd row. The :even and :odd filters in jQuery make it incredibly easy to add this type of styling to any table. This filter isn't only for zebra striping — the possibilities for how you can apply this filter are nearly endless, but zebra striping is a great example.
<!doctype html>
<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></
script>
<script>
$(document).ready(function() {
$('tr:even').css('background','#999');
$('tr:odd').css('background','#f5f5f5');
});
</script>
- Styling The First and Last Items in A List or Collection of Elements
If you want to filter out only the first or last item from a set of elements in the DOM, you would use the :first and :last filter applied to your selector. This filter returns only one, and it's based on the index within the selector set that you choose. In the following HTML example, I want to add a bottom border to all of the list items, except the first and last item. I can go about this two ways; one by adding a .last class to the HTML on only the last element. The other way to accomplish this is to filter the ul li selector with :first and :last filters.
<doctype html>
<html>
<head>
<style>
ul {width:225px;font-family:verdana;}
ul li {border-bottom:1px solid #111;}
ul li a {text-decoration:none;}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></
script>
<script>
$(document).ready(function() {
$('ul li:first').css('border','none');
$('ul li:last').css('border','none');
});
</script>
- Filtering Elements That Contain a Specific Element
You may want to add a filter that finds only elements that have a specific element inside of them. In these cases, you can use the has() filter. The child element contained within does not have to be a direct child of the parent container: It could instead be a descendent. In the following HTML example, I want to add a filter that increases the font size of only p tags that are found within div's with the class name (.content).
<!doctype html>
<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script>
$(document).ready(function() {
$('.content:has(p)').css('font-size''','''18px');
});
</script>
Read More:
How to Filtering DOM Elements Using jQuery Selector Filters - Part 2
0 comments:
Post a Comment