Use of the jQuery:contains() selector

Question

Aryan Kumar · Answer

The jQuery :contains() selector selects elements that contain the specified string. The text can be contained directly in the element as text, or in a child element. This is mostly used together with another selector to select the elements containing the text in a group (like in the example above). Note: The text is case sensitive.

Here is an example of how to use the :contains() selector:

Code snippet

// Select all elements that contain the text "Hello World"
$("*:contains('Hello World')");

This will select all elements that contain the text "Hello World". For example, if there is a div element with the text "Hello World" inside it, this selector will select it.

You can also use the :contains() selector to select elements that contain a part of a string. For example, the following selector will select all elements that contain the word "World":

Code snippet

$("*:contains('World')");

This will select all elements that contain the word "World", even if the word is not surrounded by spaces. For example, if there is a div element with the text "HelloWorld", this selector will select it.

The :contains() selector can be a very useful tool for selecting elements that contain specific text. It can be used to filter elements, to add or remove CSS styles, or to perform other tasks.

Here are some other examples of how to use the :contains() selector:

To select all elements that contain the text "Hello World" and have a red background, you could use the following code:

Code snippet

$("*:contains('Hello World')")
  .css("background-color", "red");

To remove all elements that contain the word "World" from a page, you could use the following code:

Code snippet

$("*:contains('World')").remove();

To add a click event handler to all elements that contain the text "Hello World", you could use the following code:

Code snippet

$("*:contains('Hello World')").on("click", function() {
  // Do something when the element is clicked
});

The :contains() selector is a powerful tool that can be used to select elements based on the text they contain. It can be used to filter elements, to add or remove CSS styles, or to perform other tasks.

forum

Use of the jQuery:contains() selector

Can you answer this question?

1 Answers