Селектор Jquery для получения всех входных данных, имеющих значение

#javascript #jquery #frontend

#javascript #jquery #интерфейс

Вопрос:

Надеюсь, у вас хороший день

У меня есть такая динамическая таблица:

Я хотел бы знать, возможно ли создать селектор Jquery для получения всех входных данных, имеющих значение примерно такого:

$(‘.some-input-class:valueNotEmpty’)

И получите массив, содержащий только входные данные со значениями

Возможно ли это? или я должен сделать что-то вроде этого:

 $('.some-input-class').each(function(){
   if($(this).val()){
      //Do something
   }
})

Ответ №1:

В jQuery нет селектора для целевых элементов управления формой, которые имеют значение. Однако вы можете использовать filter() для его достижения вместо этого:

 let $inputs = $('.some-input-class').filter((i, el) => !!el.value.trim())

Рабочий пример:

 let $inputs = $('.some-input-class').filter((i, el) => !!el.value.trim())
$inputs.addClass('valid');

 .some-input-class {
  display: block;
  margin: 0 0 10px;
}
.valid {
   border: 2px solid #0C0;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="foo" class="some-input-class" />
<input type="text" value="bar" class="some-input-class" />
<input type="text" value="" class="some-input-class" />
<input type="text" class="some-input-class" />

<select class="some-input-class">
  <option value="">Please select...</option>
  <option value="lorem">Lorem ipsum</option>
</select>

<select class="some-input-class">
  <option value="">Please select...</option>
  <option value="lorem" selected>Lorem ipsum</option>
</select>

Развернуть фрагмент

Ответ №2:

Вы можете просто использовать placeholder-shown псевдокласс, который также поддерживается почти всеми современными браузерами.

Чтобы заставить его работать, вам нужно применить заполнитель ко всем входным данным в вашем HTML. Но если вы хотите, вы не хотите, чтобы это было видно, вы можете сделать это следующим образом:

 <input type="text" placeholder=" " />

Теперь вы можете использовать placeholder-shown псевдокласс для выбора всех полей ввода с текстом.

 $("input:not(:placeholder-shown)")