Comment utiliser jquery filter() dans des projets réels

Cette fois, je vais vous montrer comment utiliser jquery filter() dans des projets pratiques, et quelles sont les précautions d'utilisation de jquery filter(). Ce qui suit est un cas pratique, jetons un coup d'œil.

Définition et utilisation

La méthode filter() renvoie des éléments qui remplissent certaines conditions.

Cette méthode vous permet de spécifier une condition. Les éléments ne répondant pas aux critères seront retirés de la sélection et les éléments répondant aux critères seront renvoyés.

Cette méthode est généralement utilisée pour restreindre la portée de la recherche d'éléments dans la combinaison d'éléments sélectionnée.

Astuce : La méthode filter() est opposée à la méthode not().

filter() filtre en fonction des attributs entre parenthèses : $(“p”).filter(“p”) Ceci n'est pas autorisé. Il n'y a que quelques attributs dans les crochets de filtre, ou ce qu'ils contiennent. Ils ne peuvent pas être un élément. Par exemple, "p"

//filter() --获取具有某些属性值的标签 :(指定的对象集合进行过滤)
  $("li").filter(".item-1") //获取class属性值为item-1的li元素
  $("li").filter(":even").css("background", "red"); //获取所有偶数号的li元素,并将它们的背景颜色设为红色
  $("li").filter(".item-1,#abc").css("background-color", "yellow"); //获取class属性值为item-1的所有li标签 ，同时获取id属性值为abc的所有li标签
  $("p").filter(".selected, :first");//获取class属性值为selected的所有P标签，同时获取第一个P标签
//:contains() --获取标签里包含了某些文字的标签 (contains是判断文本的)
  //jQuery:has()和jQuery:contains()两个方法比较类似。不同点在于：has是判断标签的 contains是判断文本的
  $("p p:contains('测试')").text(); //获取p标签下包含“测试”的p标签的text值 //打印一下，结果为“测试1 测试2”
  //alert($("p").contains("测试").text()); //不能这么用，提示错误“contains不是一个函数”

html

<p class="model_content" style="">
      <p class="model_content_search layui-bg-gray">
        <form class="layui-form">
          <p class="layui-form-item fl" style="margin-top: 15px;">
            <label class="layui-form-label" style="width:66px;">选择框</label>
            <p class="layui-input-inline" style="width:174px;">
              <input id="search_val" class="layui-input" name="keyword" type="text" placeholder="请输入关键字">
            </p>
          </p>
          <p class="layui-input-inline fl" style="margin-top: 15px;">
            <button class="layui-btn">搜索</button>
          </p>
          <p class="clear"></p>
        </form>
      </p>
      <p class="search_result">
        <p class="mapAddress">
          <ul>
            <li>
              <p class="addressInfo">
                <h3>要素大市场</h3>
                <span class="bold">地址：</span>徽州大道与锦绣大道交叉口<br>
              </p>
            </li>
            <li>
              <p class="addressInfo">
                <h3>锦绣大道</h3>
                <span class="bold">地址：</span>徽州大道与锦绣大道交叉口<br>
              </p>
            </li>
            <li>
              <p class="addressInfo">
                <h3>蜀山区</h3>
                <span class="bold">地址：</span>徽州大道与锦绣大道交叉口<br>
              </p>
            </li>
            <li>
              <p class="addressInfo">
                <h3>瑶海区</h3>
                <span class="bold">地址：</span>徽州大道与锦绣大道交叉口<br>
              </p>
            </li>
          </ul>
        </p>
      </p>
    </p>
 //input中输入筛选
    var $sub2 = $("#search_val");
    $sub2.on("input", function () {
      var $iptVal2 = $sub2.val();
      $(".mapAddress li").hide();
      $(".mapAddress .addressInfo h3").filter(":contains('" + $iptVal2 + "')").parents("li").show();
    });

Je crois que vous l'avez. maîtrisé la méthode après avoir lu le cas dans cet article, pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser le plug-in Better-Scroll dans le projet

Changement de jQuery+Cookie style

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!