jQuery provides various filtering methods to refine selections and manipulate specific elements based on criteria. These methods allow you to select elements that match specific conditions. This tutorial covers the basics and advanced concepts of jQuery filtering with detailed examples, explanations, and useful tips.
You can use the .filter() method to filter elements that match a specified selector.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .filter() Method - Basic</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("p").filter(".highlight").css("border", "2px solid red");
});
});
</script>
</head>
<body>
<p class="highlight">This is a highlighted paragraph.</p>
<p>This is another paragraph.</p>
<button id="btn">Filter and Highlight</button>
</body>
</html>
This example demonstrates how to use the .filter() method to select elements that match a specific class.
You can use the .first() method to select the first element in a set of matched elements.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .first() Method - First Element</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("div p").first().css("border", "2px solid blue");
});
});
</script>
</head>
<body>
<div>
<p>This is the first paragraph.</p>
<p>This is another paragraph.</p>
</div>
<button id="btn">Highlight First Element</button>
</body>
</html>
This example shows how to use the .first() method to select the first paragraph within a div.
You can use the .last() method to select the last element in a set of matched elements.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .last() Method - Last Element</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("div p").last().css("border", "2px solid green");
});
});
</script>
</head>
<body>
<div>
<p>This is a paragraph.</p>
<p>This is the last paragraph.</p>
</div>
<button id="btn">Highlight Last Element</button>
</body>
</html>
This example demonstrates how to use the .last() method to select the last paragraph within a div.
You can use the .even() method to select even-indexed elements in a set.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .even() Method - Even Elements</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("li").filter(":even").css("border", "2px solid purple");
});
});
</script>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<button id="btn">Highlight Even Elements</button>
</body>
</html>
This example shows how to use the .even() method to select even-indexed list items.
You can use the .odd() method to select odd-indexed elements in a set.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .odd() Method - Odd Elements</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("li").filter(":odd").css("border", "2px solid orange");
});
});
</script>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<button id="btn">Highlight Odd Elements</button>
</body>
</html>
This example demonstrates how to use the .odd() method to select odd-indexed list items.
You can use the .eq() method to select an element by its index.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .eq() Method - Filter by Index</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("li").eq(1).css("border", "2px solid pink");
});
});
</script>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<button id="btn">Highlight by Index</button>
</body>
</html>
This example shows how to use the .eq() method to select the second list item.
You can use the .not() method to exclude elements that match a specified selector.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .not() Method - Filter by Excluding</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("p").not(".highlight").css("border", "2px solid black");
});
});
</script>
</head>
<body>
<p class="highlight">This is a highlighted paragraph.</p>
<p>This is another paragraph.</p>
<button id="btn">Exclude and Highlight</button>
</body>
</html>
This example demonstrates how to use the .not() method to exclude elements with a specific class.
You can use the .has() method to select elements that contain a specified attribute.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .has() Method - Filter by Attribute</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("div").has("[data-highlight]").css("border", "2px solid brown");
});
});
</script>
</head>
<body>
<div data-highlight="true">This is a highlighted div.</div>
<div>This is another div.</div>
<button id="btn">Filter by Attribute</button>
</body>
</html>
This example shows how to use the .has() method to select elements that contain a specific attribute.
You can use the .contains() method to select elements that contain a specific text.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .contains() Method - Filter by Contains</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("p").filter(":contains('highlight')").css("border", "2px solid red");
});
});
</script>
</head>
<body>
<p>This paragraph contains the word highlight.</p>
<p>This paragraph does not.</p>
<button id="btn">Filter by Contains</button>
</body>
</html>
This example demonstrates how to use the .contains() method to select elements that contain specific text.
You can use the :visible and :hidden pseudo-classes to select elements based on their visibility.
<!DOCTYPE html>
<html>
<head>
<title>jQuery :visible and :hidden - Filter by Visibility</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("div:visible").css("border", "2px solid blue");
$("div:hidden").css("border", "2px solid green");
});
});
</script>
</head>
<body>
<div style="display:none;">This is a hidden div.</div>
<div>This is a visible div.</div>
<button id="btn">Filter by Visibility</button>
</body>
</html>
This example shows how to use the :visible and :hidden pseudo-classes to select visible and hidden elements.
You can use various jQuery selectors to filter form elements, such as :input, :text, :checkbox, etc.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Form Elements - Filter by Form Elements</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$(":input").css("border", "2px solid purple");
$(":text").css("border", "2px solid orange");
});
});
</script>
</head>
<body>
<form>
<input type="text" name="name" />
<input type="checkbox" name="agree" />
<input type="submit" />
</form>
<button id="btn">Filter Form Elements</button>
</body>
</html>
This example demonstrates how to use form element selectors to filter and manipulate form elements.
You can use the .parent() and .children() methods to filter elements based on their parent-child relationship.
<!DOCTYPE html>
<html>
<head>
<title>jQuery .parent() and .children() - Filter by Parent/Child</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("div").parent().css("border", "2px solid teal");
$("div").children().css("border", "2px solid pink");
});
});
</script>
</head>
<body>
<div>
<p>This is a child paragraph.</p>
</div>
<button id="btn">Filter by Parent/Child</button>
</body>
</html>
This example shows how to use the .parent() and .children() methods to filter elements.
You can use the :first, :last, :nth-child(), and :nth-of-type() selectors to filter elements based on their position.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Position Selectors - Filter by Position</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("li:first").css("border", "2px solid red");
$("li:last").css("border", "2px solid green");
$("li:nth-child(2)").css("border", "2px solid blue");
$("li:nth-of-type(2)").css("border", "2px solid purple");
});
});
</script>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<button id="btn">Filter by Position</button>
</body>
</html>
This example demonstrates how to use position selectors to filter elements.
You can use the :header, :animated, :focus, and other selectors to filter elements based on their type.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Type Selectors - Filter by Type</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$(":header").css("border", "2px solid red");
$(":animated").css("border", "2px solid green");
$(":focus").css("border", "2px solid blue");
});
});
</script>
</head>
<body>
<h1>This is a header</h1>
<p>This is a paragraph</p>
<input type="text" value="This is a text box" />
<button id="btn">Filter by Type</button>
</body>
</html>
This example shows how to use type selectors to filter elements.
You can use the :checked, :selected, and :disabled selectors to filter elements based on their state.
<!DOCTYPE html>
<html>
<head>
<title>jQuery State Selectors - Filter by State</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$(":checked").css("border", "2px solid red");
$(":selected").css("border", "2px solid green");
$(":disabled").css("border", "2px solid blue");
});
});
</script>
</head>
<body>
<form>
<input type="checkbox" name="agree" checked />
<select>
<option>Option 1</option>
<option selected>Option 2</option>
</select>
<input type="text" disabled value="Disabled input" />
</form>
<button id="btn">Filter by State</button>
</body>
</html>
This example demonstrates how to use state selectors to filter elements.
You can define custom filtering functions to filter elements based on custom criteria.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Custom Filtering</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function customFilter(index) {
return index % 2 === 0;
}
$(document).ready(function(){
$("#btn").click(function(){
$("li").filter(customFilter).css("border", "2px solid red");
});
});
</script>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<button id="btn">Custom Filter</button>
</body>
</html>
This example shows how to create a custom filtering function to filter elements.
You can combine multiple filters to create complex selections.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Combining Filters</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("li:even").filter(":contains('Item')").css("border", "2px solid blue");
});
});
</script>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<button id="btn">Combine Filters</button>
</body>
</html>
This example demonstrates how to combine multiple filters to refine element selections.
Following best practices when using filtering methods ensures efficient and maintainable code.