Как отфильтровать поля ввода в конкретном div

Question

Это фильтрует все поля ввода в HTML:

var required = $('input, textarea, select').filter('[required]:visible')

Я хочу отфильтровать в конкретном div:

<div id="a">
  <input ... required>
</div>
<div id="b">
  <input ... required>
  <input ... required>
</div>

Answer 1

Вы можете просто использовать следующий селектор, который использует :input (который также выберет <button> с, вы можете переключиться обратно на input,textarea,select и filter, если это не нужно):

$('#a :input:visible[required]');

Замените #a на любой div, который вы хотите фильтровать.

Если элементы должны находиться прямо под div, вы можете использовать #a > :input:visible[required].

Демо :

var $required = $('#a :input:visible[required]');

// Just to showcase what this selector matches
$required.css('background-color', 'red');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="a">
  <p>A1: <input type="text" required></p>
  <p>A2: <textarea required></textarea></p>
  <p>A3: <select required><option>option1</option></select></p>
  <p>A4 (hidden, won't be matched): <input type="text" style="display:none" required></p>
</div>
<div id="b">
  <p>B1: <input type="text" required></p>
  <p>B2: <input type="text" required></p>
</div>