计算具有某个类的所有元素，其中 data-attr 包含数字

Question

试图获取具有类" active"的每个元素的计数，并且它的输入属性" data-price "只包含["&quot]之间的数字/价格。

因此，如果 tot 元素计数> 0，请执行某些操作...

.HTML

<ul class="elem-ul">
    <li class="elem-li">
        <label class="elem-label active">    
            <input class="elem-input" data-price="[&quot;100&quot;]" type="checkbox">
       </label>         
   </li>
    <li class="elem-li">
        <label class="elem-label active">    
            <input class="elem-input" data-price="[&quot;400&quot;]" type="checkbox">
       </label>         
   </li>
    <li class="elem-li">
        <label class="elem-label active">    
            <input class="elem-input" data-price="[&quot;&quot;]" type="checkbox">
       </label>         
   </li>
    <li class="elem-li">
        <label class="elem-label">    
            <input class="elem-input" data-price="[&quot;&quot;]" type="checkbox">
       </label>         
   </li>
</ul>

jQuery我不确定如何从输入属性中获取数字

$('.elem-ul .elem-label.active').each(function(){
  var elemCt = $('input.elem-input', this).attr('data-price').length;
  if(elemCt > 0){
    //do something
  }
});

Answer 1

可以使用 .data() 方法而不是 .attr() 方法检查引号中的数字是否大于 0。使用 .data() 将为您提供一个数组作为返回值，因此您可以针对索引0从该数组中获取字符串编号。然后，您可以使用.length来获取此数字的长度。

请参阅下面的工作示例：

$('.elem-ul .elem-label.active').each(function(){
  var elem =  $('input.elem-input', this).data('price')[0]
  var elemCt = elem.length;
  if(elemCt > 0){
    //do something
    console.log("The elements price is: " +elem);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="elem-ul">
    <li class="elem-li">
        <label class="elem-label active">    
            <input class="elem-input" data-price="[&quot;100&quot;]" type="checkbox">
       </label>         
   </li>
    <li class="elem-li">
        <label class="elem-label active">    
            <input class="elem-input" data-price="[&quot;400&quot;]" type="checkbox">
       </label>         
   </li>
    <li class="elem-li">
        <label class="elem-label active">    
            <input class="elem-input" data-price="[&quot;&quot;]" type="checkbox">
       </label>         
   </li>
    <li class="elem-li">
        <label class="elem-label">    
            <input class="elem-input" data-price="[&quot;&quot;]" type="checkbox">
       </label>         
   </li>
</ul>

或者，如果您决定坚持使用.attr()，则可以改为检查elemCt是否大于 4。在引号之间没有数字的那一刻，你会得到一个看起来像[""]的字符串。因此，如果您采用此字符串的长度，您将获得4 .所以你知道，如果字符串的长度超过 4 个字符，那么它在引号内有一个数字。

$('.elem-ul .elem-label.active').each(function(){
  var elem = $('input.elem-input', this).attr('data-price');
  var elemCt = elem.length;
  if(elemCt > 4){
    //do something
    console.log("The data-price is " +elem);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="elem-ul">
    <li class="elem-li">
        <label class="elem-label active">    
            <input class="elem-input" data-price="[&quot;100&quot;]" type="checkbox">
       </label>         
   </li>
    <li class="elem-li">
        <label class="elem-label active">    
            <input class="elem-input" data-price="[&quot;400&quot;]" type="checkbox">
       </label>         
   </li>
    <li class="elem-li">
        <label class="elem-label active">    
            <input class="elem-input" data-price="[&quot;&quot;]" type="checkbox">
       </label>         
   </li>
    <li class="elem-li">
        <label class="elem-label">    
            <input class="elem-input" data-price="[&quot;&quot;]" type="checkbox">
       </label>         
   </li>
</ul>