javascript - 如何在jquery中搜索属性值的一部分？

Question

如何从所有数据属性值中获取一部分，对它们进行计数并更改元素的背景颜色。我已经在 jsfiddle 上树立了榜样

例如:

该属性称为数据搜索。该值设置为 search_12(该数字用于 ID 元素)。

单击按钮时，我试图在正文中的任何位置查找search_(我希望定位正文中的所有内容，而不是特定部分)。 因此，有很多元素具有相同的数据属性，但不同之处在于，值末尾有一个数字，该数字出于识别目的而变化。

如果可能的话，我想使用 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

您可以使用Attribute Starts With Selector :

$( "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>