jquery каждый для элементов формы - как получить следующий элемент prev в форме? - PullRequest
Новая
       6

jquery каждый для элементов формы - как получить следующий элемент prev в форме?

1 голос
/ 19 апреля 2020

У меня есть форма, в которой каждый элемент ввода имеет метку с текстом, а некоторые метки имеют элемент span с классом 'required', и между меткой и вводом текста может быть еще несколько div, например, 

<label for="diameter">D<span class="required">Required</span></label>
<div ...
    <input type="text" id="diameter" name="diameter" value="20" />

Мне нужно go через все входы, которые имеют метку с требуемым диапазоном. Я могу прокручивать все промежутки, например 

$('form .required').each(function(index, element) {
});

, где «элемент» - это промежуток. Но как я могу получить связанный ввод? Ни одна из следующих работ: 

element.next('input[type="text"]')
$(element).next('input[type="text"]')

Ответы [ 2 ]

2 голосов
/ 19 апреля 2020

Поскольку span находится внутри элемента label, вы не можете напрямую использовать метод next.

Сначала вам нужно перейти к родительскому элементу, используя метод parent. 

 $('form .required').each(function (index, element) {
     var inputElement = $(element).parent().next('div').find('input[type="text"]');
 });
0 голосов
/ 19 апреля 2020

Из его атрибута for (доступного через .attr на jQuery или .htmlFor на элементе) вы можете получить идентификатор, на который он указывает, и с помощью идентификатора вы можете выбрать нужный элемент: 

$('.required').each((_, span) => {
  const $input = $('#' + $(span).parent()[0].htmlFor);
  console.log($input.val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="diameter">D<span class="required">Required</span></label>
<div>
  <input type="text" id="diameter" name="diameter" value="20">
</div>

Если вам требуется для использования .next, вы можете использовать: 

$('.required').each((_, span) => {
  const $span = $(span);
  const $parentLabel = $span.parent();
  const forVal = $parentLabel[0].htmlFor;
  const $input = $parentLabel.next('div').find('#' + forVal);
  console.log($input.val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="diameter">D<span class="required">Required</span></label>
<div>
  <input type="text" id="diameter" name="diameter" value="20">
</div>
...