Tutorial zur Verwendung der filter()-Methode von jquery

Die Methode filter() gibt Elemente zurück, die bestimmte Bedingungen erfüllen. Mit dieser Methode können Sie eine Bedingung angeben. Elemente, die die Kriterien nicht erfüllen, werden aus der Auswahl entfernt und Elemente, die die Kriterien erfüllen, werden zurückgegeben. In diesem Artikel wird hauptsächlich die Verwendung der filter()-Methode von jquery vorgestellt. Freunde, die sie benötigen, können sich auf die Definition und Verwendung von

Die Methode filter() gibt Elemente zurück, die bestimmte Bedingungen erfüllen.

Mit dieser Methode können Sie eine Bedingung angeben. Elemente, die die Kriterien nicht erfüllen, werden aus der Auswahl entfernt und Elemente, die die Kriterien erfüllen, werden zurückgegeben.

Diese Methode wird normalerweise verwendet, um den Umfang der Suche nach Elementen in der ausgewählten Elementkombination einzugrenzen.

Tipp: Die filter()-Methode ist das Gegenteil der not()-Methode.

filter() filtert basierend auf den Attributen in Klammern. Zum Beispiel:

Dies ist nicht zulässig. Es gibt nur einige Attribute in den Filterklammern oder was sie enthalten, und darf kein Element sein, wie zum Beispiel „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('测试')").text(); //获取p标签下包含“测试”的p标签的text值 //打印一下，结果为“测试1 测试2”
  //alert($("p").contains("测试").text()); //不能这么用，提示错误“contains不是一个函数”

html

<p class="model_content" >
      <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 id="要素大市场">要素大市场</h3>
                <span class="bold">地址：</span>徽州大道与锦绣大道交叉口<br>
              </p>
            </li>
            <li>
              <p class="addressInfo">
                <h3 id="锦绣大道">锦绣大道</h3>
                <span class="bold">地址：</span>徽州大道与锦绣大道交叉口<br>
              </p>
            </li>
            <li>
              <p class="addressInfo">
                <h3 id="蜀山区">蜀山区</h3>
                <span class="bold">地址：</span>徽州大道与锦绣大道交叉口<br>
              </p>
            </li>
            <li>
              <p class="addressInfo">
                <h3 id="瑶海区">瑶海区</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();
    });

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Beispielcode für den asynchronen Datei-Upload im Ajax-Formular

Schnelle Lösung für verstümmelten Ajax-Übermittlungscode unter IE

Ajax legt eine asynchrone Implementierungsmethode fest, um zu überprüfen, ob der Benutzername vorhanden ist

Das obige ist der detaillierte Inhalt vonTutorial zur Verwendung der filter()-Methode von jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!