How do you use jQuery's filter() method to selectively manipulate a subset of DOM elements?

Question

Aryan Kumar · Answer

To use jQuery's filter() method to selectively manipulate a subset of DOM elements, you can follow these steps:
Select the set of elements you want to filter using a jQuery selector. This can be any valid selector, such as a class, ID, tag name, or attribute.Use the filter() method to selectively manipulate a subset of the selected elements based on a given condition. This can be any condition that returns a boolean value, such as a function, a property, or a value.Perform the desired manipulation on the filtered elements. This can be any jQuery method that applies to the selected elements, such as changing the CSS styles, adding or removing classes, or updating the text or HTML content.
Here's an example code snippet to demonstrate the above steps:
andlt;ul>
 andlt;li class="fruit">Appleandlt;/li>
 andlt;li class="fruit">Bananaandlt;/li>
 andlt;li class="vegetable">Carrotandlt;/li>
 andlt;li class="fruit">Orangeandlt;/li>
 andlt;li class="vegetable">Cucumberandlt;/li>
andlt;/ul>
$(document).ready(function() {
 // Select all li elements with class "fruit"
 var $fruits = $('li.fruit');
 // Filter the fruits that contain the letter "a"
 var $filteredFruits = $fruits.filter(function() {
   return $(this).text().indexOf('a') !== -1;
 });
 // Change the CSS color of the filtered fruits
 $filteredFruits.css('color', 'red');
 // Select all li elements with class "vegetable"
 var $vegetables = $('li.vegetable');
 // Filter the vegetables that are not the first child
 var $filteredVegetables = $vegetables.filter(':not(:first-child)');
 // Add a class to the filtered vegetables
 $filteredVegetables.addClass('highlighted');
});
In this example, we start by selecting all the li elements with class "fruit" and filtering the ones that contain the letter "a" using a function that checks the text content. We then change the CSS color of the filtered fruits using the css() method.
Next, we select all the li elements with class "vegetable" and filter the ones that are not the first child using a filter() method with the :not() and :first-child selectors. We then add a class to the filtered vegetables using the addClass() method.
The result is that the filtered fruits are highlighted in red, and the filtered vegetables are highlighted with a custom class. By using the filter() method, we can selectively manipulate only the elements that meet certain criteria, without affecting the rest of the DOM elements.

forum

How do you use jQuery's filter() method to selectively manipulate a subset of DOM elements?

Revati S Misra

Can you answer this question?

1 Answers

Liked By