jQuery が contains フィルターを使用して正確なmatching_jqueryを実現する方法の詳細な説明-jsチュートリアル-php.cn

jQuery が contains フィルターを使用して正確なmatching_jqueryを実現する方法の詳細な説明

WBOY

リリース： 2016-05-16 15:13:48

オリジナル

1360 人が閲覧しました

この記事の例では、jQuery が contains フィルターを使用して完全一致を実現する方法を説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

:contains セレクターは、指定された文字列を含む要素を選択します。

文字列は、要素内に直接含まれるテキスト、または子要素内に含まれるテキストにすることができます。

は、指定されたグループ内の指定されたテキストを含む要素を選択するために、次のような他の要素/セレクターと一緒に使用されることがよくあります。

$("p:contains(is)") は、「is」を含むすべての

要素を選択することを意味します。

別の例:

$("p:contains("张三")") または $("p:contains("张三")") は、「张三」を含むすべての

要素を選択することを意味します。

このセレクターで次のような変数を使用して、選択の目的を達成することもできます。

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

ログイン後にコピー

次のように、jquery の filter メソッドと contains メソッドを併用して、よりあいまいな一致を実現することもできます。

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

ログイン後にコピー

は、「李」を含むボックスの文字色を赤色に設定することを意味します。

jQuery は、contains フィルターを使用して完全一致を実現します:

<!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 () {
      //根据select中的option的文本来执行选中
      //$("#selectbox option[text='第二项']");
      //$("#selectbox option").filter("[text='第二项']");
      //上面两种写法都是错误的
      //正确写法
      $("#btn4").click(function () {
        var $option =$("#selectbox option:contains('第二项')").map(function(){
          if ($(this).text() == "第二项") {
            return this;
          }
        });
        alert($option.length > 0 &#63; "有对象" : "无对象");
        $option.attr("selected", true);
      });
    });
  </script>
</head>
<body>
  <form id="form1">
  <div>
    <select id="selectbox">
      <option value="1">第一项</option>
      <option value="2">第二项</option>
      <option value="21">第二项1</option>
    </select>
    <input type="button" id="btn4" value="contains测试" />
  </div>
  </form>
</body>
</html>

ログイン後にコピー

さらに jQuery 関連のコンテンツに興味のある読者は、このサイトの特別トピック「

JQuery ドラッグ効果とスキルの概要」、「jQuery 拡張機能のスキルの概要」をチェックしてください。、「jQuery共通古典特撮使い方まとめ」、「jQueryアニメーションと特撮使い方まとめ」、「jQueryセレクター使い方まとめ」

この記事が jQuery プログラミングのすべての人に役立つことを願っています。