How can jQuery be used to target a specific class based on its inner value?

Question

How can jQuery be used to target a specific class based on its inner value?

For instance, within a div of the same class, there are 6 "p" tags - some containing 'member' text and others not. I aim to use jQuery to select all "p" tags with 'member' as their inner text and apply an additional class to them.

Here is the code on which I intend to take action:

<div>
<p class="customClass">Member</p>
<p class="customClass">Non-Member</p>
<p class="customClass">Member</p>
<p class="customClass">Non-Member</p>
<p class="customClass">Member</p>
</div>

This is the expected outcome:

<div>
<p class="customClass member">Member</p>
<p class="customClass">Non-Member</p>
<p class="customClass member">Member</p>
<p class="customClass">Non-Member</p>
<p class="customClass member">Member</p>
</div>

javascript jquery css

Answer 1

Answer №1

Here's a solution to filter out all .customClass elements that only contain the word "Member" and add the class .member:

$(".customClass").filter(function() {
  return $(this).text().trim() === "Member"
}).addClass("member");

.member {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <p class="customClass">Member</p>
  <p class="customClass">Non-Member</p>
  <p class="customClass">Member</p>
  <p class="customClass">Non-Member</p>
  <p class="customClass">Member</p>
</div>

Answer 2

Here's a solution to filter out all .customClass elements that only contain the word "Member" and add the class .member:

$(".customClass").filter(function() {
  return $(this).text().trim() === "Member"
}).addClass("member");

.member {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <p class="customClass">Member</p>
  <p class="customClass">Non-Member</p>
  <p class="customClass">Member</p>
  <p class="customClass">Non-Member</p>
  <p class="customClass">Member</p>
</div>

Answer 3

Answer №2

To target elements with a specific class using jQuery, you can use the following selector:


$(".member").doSomething();

This is a straightforward approach for selecting elements by their class attribute. For further information and advanced techniques, I recommend referring to the official jQuery documentation.

Explore jQuery selectors here

Answer 4

To target elements with a specific class using jQuery, you can use the following selector:


$(".member").doSomething();

This is a straightforward approach for selecting elements by their class attribute. For further information and advanced techniques, I recommend referring to the official jQuery documentation.

Explore jQuery selectors here

Answer 5

Answer №3

Utilize the code snippet below:

    $("p:contains(Member)")

This jQuery function will retrieve all 'p' tags that include the word 'Member'. You can then assign an extra class using the following code:

    $("p:contains(Member)").addClass("member");

If you specifically want to target only "Members" and exclude "Non-Members", you can try out this code:

    $("p:not(:contains(Non-Member))").addClass("member")

To make the selection more precise, you can experiment with extending the selector text. For instance:

    $(".customClass p:not(:contains(Non-Member))").addClass("member")

This code segment will select all elements with the class "customClass" that do not contain the phrase "Non-Member". It now specifically selects all "p" tags with the class "customClass" that do not have the term "Non-Member" and adds the class "member" to them.

Answer 6

Utilize the code snippet below:

    $("p:contains(Member)")

This jQuery function will retrieve all 'p' tags that include the word 'Member'. You can then assign an extra class using the following code:

    $("p:contains(Member)").addClass("member");

If you specifically want to target only "Members" and exclude "Non-Members", you can try out this code:

    $("p:not(:contains(Non-Member))").addClass("member")

To make the selection more precise, you can experiment with extending the selector text. For instance:

    $(".customClass p:not(:contains(Non-Member))").addClass("member")

This code segment will select all elements with the class "customClass" that do not contain the phrase "Non-Member". It now specifically selects all "p" tags with the class "customClass" that do not have the term "Non-Member" and adds the class "member" to them.

How can jQuery be used to target a specific class based on its inner value?

Answer №1

Answer №2

Answer №3

Similar questions

Escape from the chains of node.js then() statements

Page freezing due to JQuery scroll event

View is unable to trigger the success attribute

Issue with state not being updated upon clicking "Save" button

What could be causing the "Undefned Jquery-ajax" error to pop up

Ways to terminate and fulfill a promise

Custom Log4j rollover script to automatically delete logs once the filesystem usage exceeds a specific threshold

Refreshing a div using ajax technology

Update the link to a KML file used by Google Maps when a button is clicked

Need to split your screen into two horizontal DIVs, each with their own scrollbars? Check out this example link for a demonstration!

Develop a library of components using TypeScript and Less files

Guide on transferring PHP database information to JQuery and then adding it to a Table

What is the best way to convert my JSON data to HTML using JavaScript?

Issues with styled-components media queries not functioning as expected

In the iOS app when the Ionic HTML5 select keypad is opened, a bug causes the view to scroll upwards and create empty space after tapping the tab

Utilizing long-polling AJAX to connect with a REST API and Memcached in a PHP-based system

Are there any straightforward methods to fully freeze an object along with all its descendants in JavaScript (Deep Freeze)?

Ways to troubleshoot the "TypeError: Cannot read property 'value' of null" issue in a ReactJS function

Issue with HTML 5 audio player not functioning correctly in Chrome browsers when trying to forward or rewind playback

Send the user to an Angular route once they have successfully authenticated with Google