elm.children не является функцией (внутри $ ('. input-group'). каждая

Question

Как получить доступ к нескольким дочерним элементам в jQuery ??

для краткости:

$('.input-group').each(function(i, elm)
{
  elm.children('.input-group-addon').addClass('alert-danger'); // <-- elm.children is not a function
  elm.children('.form-control').first().text('aaa bbb ccc');   // <-- elm.children is not a function
});

Что я пропустил?

Answer 1

Второй аргумент обратного вызова .each() в jQuery относится к стандартному Element объекту, не объекту jQuery.Вы можете заключить элемент в $(...), чтобы включить использование методов jQuery:

let $elm = $(elm);
$elm.children('.input-group-addon').addClass('alert-danger');
$elm.children('.form-control').first().text('aaa bbb ccc');

$('.input-group').each(function(i, elm)
{
  let $elm = $(elm);
  $elm.children('.input-group-addon').addClass('alert-danger');
  $elm.children('.form-control').first().text('aaa bbb ccc');
});

.alert-danger { color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group">
  <div class="input-group-addon">Addon</div>
  <div class="input-group-addon">Addon</div>
  <div class="input-group-addon">Addon</div>
  <div class="form-control">Form Control</div>
  <div class="form-control">Form Control</div>
  <div class="form-control">Form Control</div>
</div>

---

Или используйте $(this):

let $elm = $(this);
$elm.children('.input-group-addon').addClass('alert-danger');
$elm.children('.form-control').first().text('aaa bbb ccc');

$('.input-group').each(function(){
  let $elm = $(this);
  $elm.children('.input-group-addon').addClass('alert-danger');
  $elm.children('.form-control').first().text('aaa bbb ccc');
});

.alert-danger { color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group">
  <div class="input-group-addon">Addon</div>
  <div class="input-group-addon">Addon</div>
  <div class="input-group-addon">Addon</div>
  <div class="form-control">Form Control</div>
  <div class="form-control">Form Control</div>
  <div class="form-control">Form Control</div>
</div>

---

Тем не менее, это не похоже на сценарий использования цикла, и часто лучше избегать их там, где это возможно,Вместо этого я мог бы предложить что-то вроде следующего:

$('.input-group')
  .children('.input-group-addon')
  .addClass('alert-danger')
  .end()
  .children('.form-control:first')
  .text('aaa bbb ccc');

.alert-danger { color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group">
  <div class="input-group-addon">Addon</div>
  <div class="input-group-addon">Addon</div>
  <div class="input-group-addon">Addon</div>
  <div class="form-control">Form Control</div>
  <div class="form-control">Form Control</div>
  <div class="form-control">Form Control</div>
</div>

Приведенный выше фрагмент сужает выделение до .children('.input-group-addon'), а затем использует .end(), чтобы вернуться кначальный выбор .input-group.

.end()

Описание: Завершить самую последнюю операцию фильтрации в текущей цепочке и вернуть набор соответствующих элементовв прежнее состояние.

Answer 2

В вашем цикле используйте «this» в качестве контекста для поиска дочерних элементов вместо «elm».Таким образом, вам не нужно конвертировать «elm» в объект jquery $ (elm)

$('.input-group').each(function(i, elm) {
  $('.input-group-addon',this).addClass('alert-danger'); 
  $('.form-control',this).first().text('aaa bbb ccc');   
});