jQuery：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 我不确定如何从输入attr中获取数字

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

Answer 1

您可以使用0方法而不是.data()方法来检查引号中的数字是否大于.attr()。使用.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>

或者，如果您决定坚持使用elemCt，也可以检查.attr()是否大于四。当引号之间没有数字时，您会得到一个类似于[""]的字符串。因此，如果使用此字符串的长度，则将得到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>