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

Question

How can I get a part from all data attribute values , count them and change background color of the element . I have set an example on jsfiddle

For example:

The attribute is called data-search . The value is set to search_12 (the number is to ID the element).

I'm trying to find search_ everywhere in the body (I'd like to target everything within the body and no a specific section) when clicking the button. So, there is a lot of elements that have the same data attribute , but the difference, is that, the value has a number at the end that changes for identification purpose.

If it is possible, I'd like to use split method since is faster than match() or RegExp(). Otherwise, feel free to answer your way.

This is what I have.

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>

Any help will be appreciated!

Answer 1

You can use the 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> 

Answer 2

Just use the appropriate CSS Attribute selector

[attr^=value]

Represents an element with an attribute name of attr whose value is prefixed (preceded) by value.

So in your example you would use something along the lines of

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

The collection would then hold all elements that had a data-search attribute that was prefixed with search_

Demo

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