집 >웹 프론트엔드 >JS 튜토리얼 >jquery의 filter() 메소드 사용에 대한 튜토리얼

jquery의 filter() 메소드 사용에 대한 튜토리얼

亚连원래의: 2018-05-26 16:40:021400검색

filter() 메서드는 특정 조건을 충족하는 요소를 반환합니다. 이 방법을 사용하면 조건을 지정할 수 있습니다. 기준에 맞지 않는 요소는 선택 항목에서 제거되고 기준에 맞는 요소는 반환됩니다. 이번 글에서는 주로 jquery의 filter() 메소드 사용법을 소개합니다. 필요한 친구들은 특정 조건을 만족하는 요소를 반환하는

filter() 메소드의 정의와 사용법을 참고하면 됩니다.

이 방법을 사용하면 조건을 지정할 수 있습니다. 기준에 맞지 않는 요소는 선택 항목에서 제거되고 기준에 맞는 요소는 반환됩니다.

이 방법은 일반적으로 선택한 요소 조합에서 요소 검색 범위를 좁힐 때 사용됩니다.

팁: filter() 메서드는 not() 메서드와 반대입니다.

filter()는 괄호 안의 속성을 기반으로 필터링합니다. 예: $(“p”).filter(“p”) 이것은 허용되지 않습니다. 필터 괄호에는 일부 속성만 있거나 "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不是一个函数”

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();
    });

과 같은 요소가 될 수 없습니다. 위 내용은 제가 모든 사람을 위해 편집한 것입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.

jquery의 filter() 메소드 사용에 대한 튜토리얼

관련 기사