Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

jQuery :contains() Selector

Posted in jQuery Tutorial
Updated on May 19, 2024
By Mari Selvan
👁️ 42 - Views
⏳ 4 mins
💬 1 Comment
jQuery :contains() Selector

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
Copy To Clipboard
$("selector:contains('text')")

📝 Example

  1. 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
    Copy To Clipboard
    <ul>
      <li>Apple</li>
      <li>Banana</li>
      <li>Orange</li>
    </ul>
    example.js
    Copied
    Copy To Clipboard
    $("li:contains('Banana')").css("color", "green");

    This will change the color of the list item containing the text Banana to green.

  2. 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
    Copy To Clipboard
    <table>
      <tr>
          <td>John</td>
          <td>Doe</td>
      </tr>
      <tr>
          <td>Jane</td>
          <td>Smith</td>
      </tr>
    </table>
    example.js
    Copied
    Copy To Clipboard
    $("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.

  3. 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
    Copy To Clipboard
    <div class="message">Hello, World!</div>
    <div class="message">Goodbye, World!</div>
    example.js
    Copied
    Copy To Clipboard
    $(".message:contains('Hello')").text("Greetings!");

    This will change the text of the div containing Hello to Greetings!.

  4. 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.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy