如何在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>