jQuery :contains() Selector

Posted in jQuery Tutorial

Updated on Oct 30, 2024

By Mari Selvan

👁️ 57 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

In web development, jQuery offers a plethora of powerful tools to manipulate HTML elements efficiently. One such tool is the :contains() selector, which enables you to select elements based on their textual content. Understanding and mastering this selector can significantly enhance your ability to interact with and manipulate HTML elements containing specific text.

This guide will explore the usage of the jQuery :contains() selector with comprehensive examples to illustrate its utility.

🧠 Understanding :contains() Selector

The :contains() selector allows you to target elements containing specific text within their content. This selector is particularly useful when you need to select elements dynamically based on their textual content.

💡 Syntax

The syntax for the :contains() selector is straightforward:

syntax.js

Copied

$("selector:contains('text')")

📝 Example

Selecting Elements Containing Text:

Suppose you have a list of elements and you want to select those containing a specific text. You can achieve this using the :contains() selector as follows:
index.html
Copied
```
<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ul>
```
example.js
Copied
```
$("li:contains('Banana')").css("color", "green");
```
This will change the color of the list item containing the text Banana to green.
Filtering Table Rows Based on Content:

Consider a scenario where you have a table and you want to filter rows based on a specific text within one of the columns. You can use the :contains() selector for this purpose:
index.html
Copied
```
<table>
  <tr>
      <td>John</td>
      <td>Doe</td>
  </tr>
  <tr>
      <td>Jane</td>
      <td>Smith</td>
  </tr>
</table>
```
example.js
Copied
```
$("td:contains('Doe')").parent().css("background-color", "lightblue");
```
This will highlight the entire row where the last name is Doe with a light blue background.
Dynamically Updating Content:

You can also dynamically update the content of elements based on specific text using jQuery and the :contains() selector. For example:
index.html
Copied
```
<div class="message">Hello, World!</div>
<div class="message">Goodbye, World!</div>
```
example.js
Copied
```
$(".message:contains('Hello')").text("Greetings!");
```
This will change the text of the div containing Hello to Greetings!.
Case Sensitivity:

Keep in mind that the :contains() selector is case-sensitive. Ensure that the text you provide matches the case of the content you're targeting.

🎉 Conclusion

The jQuery :contains() selector is a versatile tool for selecting and manipulating HTML elements based on their textual content. Whether you need to select elements, filter table rows, dynamically update content, or perform other text-based operations, this selector offers a convenient solution.

By mastering its usage, you can efficiently interact with and manipulate elements containing specific text, thereby enhancing the interactivity and functionality of your web pages.