如何在jQuery中搜索一部分屬性值？

Question

如何從所有數據屬性值中獲取零件，對其進行計數並更改元素的背景顏色 。 我在jsfiddle上設置了一個示例

例如：

該屬性稱為data-search 。 該值設置為search_12 （數字用於標識元素）。

單擊按鈕時，我試圖在身體的任何地方找到search_ （我想將身體內的所有物體作為目標，而沒有特定的部分）。 因此，有許多具有相同data屬性的元素，但是不同之處在於，該值的末尾有一個數字會出於標識目的而更改。

如果可能的話，我想使用split方法，因為它比match（）或RegExp（）更快。 否則，請隨意回答。

這就是我所擁有的。

JS

$( "button" ).on( "click", function() {

      var search = $( "body" ).children( "*" ).attr( "data-search" )

      var results = search.split( 'search_' ).length - 1;  

      $('.count-results').text( results )

});

HTML

<div class="section">
   <button type="button">Search</button>
</div>

<div class="section">
   <section>
      <div>
         <h1>Please <span class="span" data-search="search_21">find me</span></h1>
         <p class="para">Search for data</p>
      </div>
   </section>

   <article> 
      <section>
         <div>
            <h1>Find the next element's data</h1>
            <p data-search="search_400" class="para">
            Find me too
            </p>
         </div>
      </section>
   </article>

   <details open>
      <address>
        Written by <a href="#" data-search="search_1">Jon Doe</a>.<br> 
        Visit us at:<br>
        Example.com<br>
        Box <span class="number" data-search="search_anything">564</span>, 
        Disneyland<br>
        USA
     </address>
   </details>
</div>

<div class="section">
   <p>The string of <b>search_</b> was found:</p>
   <div>
      <span class="count-results"></span> times
   </div> 
</div>

任何幫助將不勝感激！

Answer 1

您可以使用“ 以選擇器開頭 ” 屬性 ：

 $( "button" ).on( "click", function() { var results = $('[data-search^="search_"]'); results.css('background', 'red'); $('.count-results').text(results.length); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="section"> <button type="button">Search</button> </div> <div class="section"> <section> <div> <h1>Please <span class="span" data-search="search_21">find me</span></h1> <p class="para">Search for data</p> </div> </section> <article> <section> <div> <h1>Find the next element's data</h1> <p data-search="search_400" class="para"> Find me too </p> </div> </section> </article> <details open> <address> Written by <a href="#" data-search="search_1">Jon Doe</a>.<br> Visit us at:<br> Example.com<br> Box <span class="number" data-search="search_anything">564</span>, Disneyland<br> USA </address> </details> </div> <div class="section"> <p>The string of <b>search_</b> was found:</p> <div> <span class="count-results"></span> times </div> </div> 

Answer 2

只需使用適當的CSS屬性選擇器

[attr^=value]

表示屬性名稱為attr的元素，其值以值為前綴（在前面）。

因此，在您的示例中，您將使用類似於

$("[data-search^='search_']")

然后，集合將保存所有具有以search_為前綴的data-search屬性的search_

演示

 $("button").click(function(){ var count = $("[data-search^='search_']").length; $(".count-results").text(count); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="section"> <button type="button">Search</button> </div> <div class="section"> <section> <div> <h1>Please <span class="span" data-search="search_21">find me</span></h1> <p class="para">Search for data</p> </div> </section> <article> <section> <div> <h1>Find the next element's data</h1> <p data-search="search_400" class="para"> Find me too </p> </div> </section> </article> <details open> <address> Written by <a href="#" data-search="search_1">Jon Doe</a>.<br> Visit us at:<br> Example.com<br> Box <span class="number" data-search="search_anything">564</span>, Disneyland<br> USA </address> </details> </div> <div class="section"> <p>The string of <b>search_</b> was found:</p> <div> <span class="count-results"></span> times </div> </div>