jQuery 小技巧 - :contains() 尋找完全吻合文字

2019-10-25 06:38 AM

jQuery :contains() 選擇器可用來選取子元素內包含特定文字的元素。最近遇上一個狀況，網頁上有兩個選項，內容分別是【同意】跟【不同意】：

  <p>
    <span>同意</span>
    <span>不同意</span>
  </p>

$("span:contains('不同意')") 選取 不同意 沒問題，想選【同意】用 $("span:contains('同意')") 會一次選到兩個。爬文在 stackoverflow 查到好用技巧，:contains() 選取結果套用 .filter() 進行二次篩選，並有幾種花式應用選擇：

如果是 同意 格式
.filter(function() { return $(this).text() === "同意" })
如果文字可能換行或縮排，如:
```

 同意

```
則可以用 .filter(function() { return $.trim($(this).text()) === "同意" })
如果想排除內嵌子元素的選項，如：
```
同意
```
則可比對 innerHTML .filter(function() { return this.innerHTML === "同意" })

我寫了一個完整範例：jsbin

<html>
<head>
  <meta charset="utf-8">
  <title>jQuery contains 小技巧</title>
  <style>
    .btns {
      margin-top: 12px;
    }

    .btns button {
      margin: 3px;
    }

    .highlight {
      color: red;
    }

    p {
      margin: 0;
      padding: 3px;
    }

    p span {
      margin-right: 3px;
      font-size: 14pt;
      font-weight: bold;
      color: rebeccapurple;
    }
  </style>
</head>

<body>
  <p>
    <span>同意</span>
    <span>不同意</span>
    (標準)
  </p>
  <p>
    <span>
      同意
    </span>
    <span>
      不同意
    </span>
    (HTML換行縮排)
  </p>
  <p>
    <span><small>同意</small></span>
    <span><small>不同意</small></span>
    (包入&lt;small&gt;)
  </p>

  <div class="btns">
    <button id='b1'>:contains('不同意')</button>
    <button id='b2'>:contains('同意')</button><br />
    <button id='b3'>等於"同意"</button>
    <button id='b4'>等於"同意"(忽略空白/換行)</button><br />
    <button id='b5'>等於"同意"(純文字，無子元素)</button>
  </div>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script>
    function highlight(elems) {
      elems.addClass("highlight");
      setTimeout(function () {
        elems.removeClass("highlight");
      }, 1000);
    }
    $("#b1").click(function () { highlight($("span:contains('不同意')")); });
    $("#b2").click(function () { highlight($("span:contains('同意')")); });
    $("#b3").click(function () { 
      var e = $("span:contains('同意')").filter(function() {
        return $(this).text() === "同意";
      }); 
      highlight(e);
    });
    $("#b4").click(function () { 
      var e = $("span:contains('同意')").filter(function() {
        return $.trim($(this).text()) === "同意";
      }); 
      highlight(e); 
    });
    $("#b5").click(function () { 
      var e = $("span:contains('同意')").filter(function() {
        return this.innerHTML == "同意";
      }); 
      highlight(e) ;
    });

  </script>
</body>
</html>

實測結果如下：

jQuery 小技巧 - :contains() 尋找完全吻合文字

Comments

# 2019-11-01 11:00 AM by 布萊恩

Post a comment