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

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

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

  • 如果是 <span>同意</span> 格式
    .filter(function() { return $(this).text() === "同意" })
  • 如果文字可能換行或縮排,如:
    <span>
      同意
    </span>
    
    則可以用 .filter(function() { return $.trim($(this).text()) === "同意" })
  • 如果想排除內嵌子元素的選項,如:
    <span><small>同意</small></span>
    
    則可比對 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>

實測結果如下:

Demostrating how to use jQuery :contains() seletor to filter text exactly matched.


Comments

# by 布萊恩

可以考慮以 data attributes 解此題

Post a comment


45 - 1 =