Of Stack

jQuery uses contains filters to achieve accurate matching method details

  • 2021-01-11 01:50:39
  • OfStack

This article illustrates how jQuery uses contains filters to achieve an exact match. To share with you for your reference, as follows:

:contains selector selects the element containing the specified string.

The string can be text contained directly within an element or contained within a child element.

Often used with other elements/selectors 1 to select elements in a specified group that contain the specified text, such as:

$("p:contains(is)") indicates that all options containing "is" are selected < p > Elements.

Such as:

$(" p: contains (3) ") or $(" p: contains (" 3 ") ") to select all contain "3" < p > Elements.

Variables can also be used in the selector for selection purposes, such as: 


$(document).ready(function(){
var ddd="John";
$("div:contains( ' " + ddd + " ' )").css("color", "#f00");
});

We can also use filter method of jquery and contains method 1 to achieve the purpose of more fuzzy matching, such as: 


$(document).ready(function(){
$(".box").filter(":contains( li )").css("color", "#f00");
});

Set the text color of box containing "lee" to red.

jQuery uses contains filter to achieve accurate matching: 


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <!--<script src="jquery.min.js" type="text/javascript"></script>-->
  <script src="jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      // According to the select In the option Text to perform the selection 
      //$("#selectbox option[text=' The first 2 item ']");
      //$("#selectbox option").filter("[text=' The first 2 item ']");
      // Both of the above are wrong 
      // Correct term 
      $("#btn4").click(function () {
        var $option =$("#selectbox option:contains(' The first 2 item ')").map(function(){
          if ($(this).text() == " The first 2 item ") {
            return this;
          }
        });
        alert($option.length > 0 ? " There are objects " : " There is no object ");
        $option.attr("selected", true);
      });
    });
  </script>
</head>
<body>
  <form id="form1">
  <div>
    <select id="selectbox">
      <option value="1"> The first 1 item </option>
      <option value="2"> The first 2 item </option>
      <option value="21"> The first 2 item 1</option>
    </select>
    <input type="button" id="btn4" value="contains test " />
  </div>
  </form>
</body>
</html>

Readers who are interested in more jQuery related content can check the special features of this site: jQuery Drag and drop effects and techniques summary, jQuery extension techniques summary, jQuery common classic effects summary, jQuery animation and effects usage summary and jquery selector method summary

I hope this article described to everyone jQuery programming help.

Related articles: