• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • has()

    筛选匹配元素集合中的那些有相匹配的选择器或DOM元素的后代元素。

  • .has(selector)
    • selector类型: String。一个用于匹配元素的选择器字符串。
  • .has(contained)
    • contained类型: Element。用于匹配元素的DOM元素。
  • 如果提供一个jQuery对象代表DOM元素集合,.has()方法会用其子集创建一个新的jQuery对象。提供的选择器会一一测试原先那些匹配元素的后代,含有匹配后代的元素会保留在结果中。

    下面是一个嵌套列表的页面:

     <ul>
      <li>list item 1</li>
      <li>list item 2
        <ul>
          <li>list item 2-a</li>
          <li>list item 2-b</li>
        </ul>
      </li>
      <li>list item 3</li>
      <li>list item 4</li>
    </ul>
    

    我们可以用如下方式对列表项集合应用这个方法:

    $('li').has('ul').css('background-color', 'red');
    
    • list item 1
    • list item 2
      • list item 2-a
      • list item 2-b
    • list item 3
    • list item 4

    结果是 item 2 背景变成了红色,因为只有这个<li>含有<ul>后代。

    例子

    检测是否一个元素在另一个之内。

    <!DOCTYPE html>
    <html>
    <head>
      <style>
      .full { border: 1px solid red; }
    </style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
     
    <ul><li>Does the UL contain an LI?</li></ul>
     
    <script>
      $("ul").append("<li>" + ($("ul").has("li").length ? "Yes" : "No") + "</li>");
      $("ul").has("li").addClass("full");
    </script>
     
    </body>
    </html>
    
    • Does the UL contain an LI?

    上篇:filter()

    下篇:is()