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>