jQuery First, last, eq, filter(), not(), slice() Selector Methods

Leave a Comment on jQuery First, last, eq, filter(), not(), slice() Selector Methods

jQuery filter first, last, specific, and etc elements; In this tutorial, you will learn how to use jQuery filter methods for select elements on HTML.

jQuery First, last, eq, filter(), not(), slice() Selector Methods

jQuery offers several filter methods such as first(), filter(), last(), eq(), slice(), has(), not(), etc. You can use to reduce the search or filter of elements in a DOM tree. Here we will demostrate all jQuery filter methods with examples:

  1. jQuery first() Method
  2. jQuery last() Method
  3. jQuery eq() Method
  4. jQuery filter() Method
  5. jQuery not() Method
  6. jQuery slice() Method

jQuery first() Method

Using the jQuery first() method can filter/get the first element of the HTML elements.

Syntax first() Method

$("selector").first();

jQuery first() method By Example

This example will demonstrate to you how to get/filter the first html elements using first () method.

<!DOCTYPE html>
<html>
<head>
<title>jQuery First Method Example</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style type="text/css">
.first{
    padding: 15px;
    border: 12px solid #23384E;
    background: #28BAA2;
    margin-top: 10px;
}
</style>
<script>
$(document).ready(function(){
  $(".first").first().css("background-color", "green");
});
</script>
</head>
<body>

<h1>This is first() method example</h1>

<div class="first">
  <p>A paragraph in a div.</p>
  <p>Another paragraph in a div.</p>
</div>
<br>

<div class="first">
  <p>A paragraph in another div.</p>
  <p>Another paragraph in another div.</p>
</div>
<br>

<div class="first">
  <p>A paragraph in another div.</p>
  <p>Another paragraph in another div.</p>
</div>

</body>
</html>

Output

jQuery First Method Example

This is first() method example

A paragraph in a div.

Another paragraph in a div.


A paragraph in another div.

Another paragraph in another div.


A paragraph in another div.

Another paragraph in another div.

jQuery last() Method

Using the jQuery last() method can filter/get the last element of the HTML elements.

Syntax last() Method

$("selector").last();

jQuery last() method By Example

This example will demonstrate to you how to get/filter the last HTML elements using last () method.

<!DOCTYPE html>
<html>
<head>
<title>jQuery Last Method Example</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style type="text/css">
.last{
    padding: 15px;
    border: 12px solid #23384E;
    background: #28BAA2;
    margin-top: 10px;
}
</style>
<script>
$(document).ready(function(){
  $(".last").last().css("background-color", "green");
});
</script>
</head>
<body>

<h1>This is last() method example</h1>

<div class="last">
  <p>A paragraph in a div.</p>
  <p>Another paragraph in a div.</p>
</div>
<br>

<div class="last">
  <p>A paragraph in another div.</p>
  <p>Another paragraph in another div.</p>
</div>
<br>

<div class="last">
  <p>A paragraph in another div.</p>
  <p>Another paragraph in another div.</p>
</div>

</body>
</html>

Output

jQuery Last Method Example

This is last() method example

A paragraph in a div.

Another paragraph in a div.


A paragraph in another div.

Another paragraph in another div.


A paragraph in another div.

Another paragraph in another div.

jQuery eq() Method

Using the jQuery eq () method search/filter the elements directly and returns an element with a specific index.

Syntax eq() Method

$("selector").eq();

jQuery eq() method By Example

This example will demonstrate to you how to get/filter selected html elements using eq () method.

<!DOCTYPE html>
<html>
<head>
<title>jQuery eq() Method Example</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style type="text/css">
.container{
    padding: 15px;
    border: 12px solid #23384E;
    background: #28BAA2;
    margin-top: 10px;
}
</style>
<script>
$(document).ready(function(){
  $(".container").eq(1).css("background-color", "green");
});
</script>
</head>
<body>

<h4>This is eq() method example</h4>

<div class="container">
  <p>A paragraph in a div.</p>
  <p>Another paragraph in a div.</p>
</div>
<br>

<div class="container">
  <p>A paragraph in another div.</p>
  <p>Another paragraph in another div.</p>
</div>
<br>

<div class="container">
  <p>A paragraph in another div.</p>
  <p>Another paragraph in another div.</p>
</div>

</body>
</html>

Output

jQuery eq() Method Example

This is eq() method example

A paragraph in a div.

Another paragraph in a div.


A paragraph in another div.

Another paragraph in another div.


A paragraph in another div.

Another paragraph in another div.

jQuery filter() Method

Using the jQuery filter () method can return the elements that match certain criteria. This method lets you specify a benchmark. Elements that do not match the criteria are removed from the selection, and those that match will be returned.

Syntax filter() Method

$("selector").filter();

jQuery filter() method By Example

This example will display the jQuery filter method. In this example, the jquery filter method filters only those elements that match the criteria and make the background color white.

<!DOCTYPE html>
<html>
<head>
<title>jQuery Filter() Method Example</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style type="text/css">
.container{
    padding: 15px;
    border: 12px solid #23384E;
    background: #28BAA2;
    margin-top: 10px;
}
</style>
<script>
$(document).ready(function(){
  $("p").filter(".inClass").css("background-color", "white");
});
</script>
</head>
<body>

<h4>This is Filter() method example</h4>

<div class="container">
  <p>A paragraph in a div.</p>
  <p class="inClass">Another paragraph in a div.</p>
</div>
<br>

<div class="container">
  <p>A paragraph in another div.</p>
  <p>Another paragraph in another div.</p>
</div>
<br>

<div class="container">
  <p class="inClass">A paragraph in another div.</p>
  <p>Another paragraph in another div.</p>
</div>

</body>
</html>

Output

jQuery Filter() Method Example

This is Filter() method example

A paragraph in a div.

Another paragraph in a div.


A paragraph in another div.

Another paragraph in another div.


A paragraph in another div.

Another paragraph in another div.

jQuery not() Method

Using the not () method is returned to those elements which do not meet specific criteria. This method lets you specify a benchmark. Elements that do not match the criteria are returned from selection and those that will be removed from the match.

This is not the opposite () method filter () method.

Syntax not() Method

$("selector").not();

jQuery not() method By Example

This example will display the jQuery not method. In this example, the jquery not method filters only those elements that do not match the criteria and make the background color white.

<!DOCTYPE html>
<html>
<head>
<title>jQuery Not() Method Example</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style type="text/css">
.container{
    padding: 15px;
    border: 12px solid #23384E;
    background: #28BAA2;
    margin-top: 10px;
}
</style>
<script>
$(document).ready(function(){
  $("b").not(".inClass").css("background-color", "Red");
});
</script>
</head>
<body>

<h4>This is Not() method example</h4>

<div class="container">
  <b>A paragraph in a div.</b>
  <b class="inClass">Another paragraph in a div.</b>
</div>

</body>
</html>

Output

jQuery Not() Method Example

This is Not() method example

A paragraph in a div. Another paragraph in a div.

jQuery slice() Method

Slice () method reduces the matching set of elements to the subset specified by a range of indices. This method accepts two integer values, index and end index starts. This method will return the elements between the start and the end index. The subset of elements consists of an element in the start index, but does not include the element in the end index.

Syntax slice() Method

 $(selector).slice(start,stop);

jQuery slice() method By Example

This example will demonstrate of jQuery slice method.

<!DOCTYPE html>
<html>
<head>
<title>jQuery slice() Method Example</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style type="text/css">
.container{
    padding: 15px;
    border: 12px solid #23384E;
    background: #28BAA2;
    margin-top: 10px;
}
</style>
<script>
$(document).ready(function(){
  $(".slclass").slice(2).css("background-color", "Yellow");
});
</script>
</head>
<body>

<h4>This is slice() method example</h4>

<div class="container">
  <p class="slclass">A paragraph in a div.</p>
  <p class="slclass">Another paragraph in a div.</p>

  <p class="slclass">A paragraph in another div.</p>
  <p class="slclass">Another paragraph in another div.</p>

  <p class="slclass">A paragraph in another div.</p>
  <p class="slclass">Another paragraph in another div.</p>

</div>
</body>
</html>

Output

jQuery slice() Method Example

This is slice() method example

A paragraph in a div.

Another paragraph in a div.

A paragraph in another div.

Another paragraph in another div.

A paragraph in another div.

Another paragraph in another div.

Recommended JQuery Tutorials

  1. jQuery | Event MouseUp By Example
  2. Event jQuery Mouseleave By Example
  3. jQuery Event Mouseenter Example
  4. Event jQuery MouseOver & MouseOut By Example
  5. keyup jquery event example
  6. Jquery Click Event Method with E.g.
  7. Event jQuery. Blur By Example
  8. jQuery form submit event with example
  9. keydown function jQuery
  10. List of jQuery Events Handling Methods with examples
  11. Jquery Selector by .class | name | #id | Elements
  12. How to Get the Current Page URL in jQuery
  13. jQuery Ajax Get() Method Example
  14. get radio button checked value jquery by id, name, class
  15. jQuery Set & Get innerWidth & innerHeight Of Html Elements
  16. jQuery Get Data Text, Id, Attribute Value By Example
  17. Set data attribute value jquery
  18. select multiple class in jquery
  19. How to Remove Attribute Of Html Elements In jQuery
  20. How to Checked Unchecked Checkbox Using jQuery
  21. jQuery removeClass & addClass On Button Click By E.g.
  22. To Remove whitespace From String using jQuery
  23. jQuery Ajax Post Method Example
  24. jQuery Ajax Get Method Example
  25. To Load/Render html Page in div Using jQuery Ajax $.load
  26. jQuery Sibling Methods – To Find Siblings Elements
  27. jQuery Find Siblings Elements with Class, id
Filed Under: Jquery

AuthorDevendra Dode

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

Your email address will not be published. Required fields are marked *