jquery each for form 元素 - 如何获取表单中的下一个、上一个元素？答案

【问题标题】：jquery each for form elements - how to get next, prev element in form?jquery each for form 元素 - 如何获取表单中的下一个、上一个元素？
【发布时间】：2020-08-01 16:15:34
【问题描述】：

我有一个表单，其中每个输入元素都有一个带有文本的标签，一些标签有一个带有“必需”类的 span 项，并且标签和文本输入之间可能还有更多 div，例如

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

我需要检查所有具有所需跨度标签的输入。我可以通过所有跨度像

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

其中的“元素”是跨度。但是我如何获得相关的输入？以下都不起作用：

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

【问题讨论】：

标签： jquery forms input each

【解决方案1】：

从它的for 属性（可通过jQuery 上的.attr 或元素上的.htmlFor 访问），您可以获得它指向的ID，并使用该ID，您可以选择您想要的元素：

$('.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>

【讨论】：

它有效，但有没有更优雅的方式从每个元素中获取元素，以便我可以使用 element.next()？
使用for 属性是最优雅的通用解决方案。如果输入始终是下一个 div 的后代，您可以转到下一个 div 并在那里搜索
它存储在两个 sn-ps 中的 $input 变量中 - 无论您需要对它们做什么，都可以使用 $input 变量名来完成
怎么来的 console.log($(span).parent().next('input[type="text"]').val());给我“未定义”？
input 不是父级的兄弟 - 它是父级的兄弟的后代。另一个问题是input[type="text"] 可能会选择 any 后代输入，不一定是具有您想要的 ID 的那个 - 如果您想走那条路，请先将 $parentLabel 保存在一个变量中，这样您就可以提取其for 属性，然后提取.find 正确的后代。

【解决方案2】：

由于span在label元素内，所以不能直接使用next方法。

首先需要使用parent方法遍历到父元素。

 $('form .required').each(function (index, element) {
     var inputElement = $(element).parent().next('div').find('input[type="text"]');
 });

【讨论】：