Tutoriel sur l'utilisation de la méthode filter() de jquery-js tutoriel-php.cn

Tutoriel sur l'utilisation de la méthode filter() de jquery

亚连

Libérer： 2018-05-26 16:40:02

original

1392 Les gens l'ont consulté

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 supprimés de la sélection et les éléments répondant aux critères seront renvoyés. Cet article présente principalement l'utilisation de la méthode filter() de jquery. Les amis qui en ont besoin peuvent se référer à la définition et à l'utilisation de

<.> 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 :

Ceci n'est pas autorisé. Il n'y a que quelques attributs dans les crochets de filtre, ou ce qu'ils contiennent, et ne peuvent pas être un élément, tel que "p" $(“p”).filter(“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(&#39;测试&#39;)").text(); //获取p标签下包含“测试”的p标签的text值 //打印一下，结果为“测试1 测试2”
  //alert($("p").contains("测试").text()); //不能这么用，提示错误“contains不是一个函数”

Copier après la connexion

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(&#39;" + $iptVal2 + "&#39;)").parents("li").show();
    });

Copier après la connexion

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.