具有类的下一个元素答案

【问题标题】：Next element with class具有类的下一个元素
【发布时间】：2017-03-23 14:30:32
【问题描述】：

我想在触发事件的元素之后找到具有给定类的下一个元素，而不管搜索元素的位置如何。假设我有多对输入。一个属于“动态”类，另一个属于“适合”类。

无论两个输入之间有什么，我都想复制 .dynamic 的值并将其传递到具有 .fit 类的下一个输入中。

我尝试了多种方法，最接近的是返回父元素并找到带有“.fit”类的输入 - 但是一旦在同一个父元素中有多对输入，这将不再起作用。任何想法如何解决这个问题？

$('.dynamic').each(function() {
  var value = $(this).val();
  $(this).parent().find("input.fit").val(value);

});

* {
  font-family: "Arial";
  font-size: 11px;
  border: 0;
}

.wrapper {
  font-size: 0;
}

input {
  background-color: blue;
  margin: 0;
}

.fit {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="wrapper">

  <input type="text" class="dynamic" value="Value 1 " />
  <input type="text" class="fit" value="-----" />

  <br>

  <input type="text" class="dynamic" value="Value 2" />
  <div>Something random here</div>
  <input type="text" class="fit" value="-----" />

</div>

非常感谢！

【问题讨论】：

api.jquery.com/nextAll

标签： javascript jquery

【解决方案1】：

很简单——您想使用.nextAll() 选择所有尾随输入，然后选择第一个，即：$(this).nextAll("input.fit").first().val(value)

.next() 不起作用的原因是它只检查直接兄弟。对于第二组输入对（带有value2），由于中间还有其他 DOM 节点，.next('input.fit') 这将不会返回任何内容，因为参数用作过滤器。由于下一个 DOM 元素是 <div> 元素，它不会通过过滤器，因此不会按预期工作。

$('.dynamic').each(function() {
  var value = $(this).val();
  $(this).nextAll("input.fit").first().val(value);

});

* {
  font-family: "Arial";
  font-size: 11px;
  border: 0;
}

.wrapper {
  font-size: 0;
}

input {
  background-color: blue;
  margin: 0;
}

.fit {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="wrapper">

  <input type="text" class="dynamic" value="Value 1 " />
  <input type="text" class="fit" value="-----" />

  <br>

  <input type="text" class="dynamic" value="Value 2" />
  <div>Something random here</div>
  <input type="text" class="fit" value="-----" />

</div>

【讨论】：

为什么要再次发布相同的答案？
@MilindAnantwar 我们正在同时撰写答案，但是我使用OP的代码进行了测试并稍后提交，之后我才意识到您也回答了。而且我的答案和你的不一样。
有道理。现在总共有 3 个答案在做或多或少相同的事情。
非常感谢你的演示，比我想象的要简单！
@MilindAnantwar 多个答案收敛到一个类似的解决方案应该被视为一个好兆头，而不是一个坏兆头。

【解决方案2】：

尝试用 jQuery 链接 nextAll() 和 first()，如下所示：

$(this).nextAll('input.fit').first().val(myval);

NextAll 将查找任何与$(this) 同级但之后的元素。 First 将防止您的 val 调用影响除第一个以外的任何输入。

【讨论】：

我的错误 - 我误读了要求 :( 感谢您指出这一点 :)
另外，OP，如果您可以选择，您真的应该使用更清晰的标记。不得不这样做感觉不对。
@BillCriswell - 你有什么建议？我很高兴有更好的解决方案。
性能现在并不重要。对你来说，这将是一场可维护性的噩梦，而不是对下一个出现的人来说是直截了当的。
我会亲自将相关的输入包装在一个共同的父级中并循环遍历这些输入。我会在这里迭代.group：<div class="wrapper"><div class="group"><input><input></div> <div class="group"><input><input></div></div>。

【解决方案3】：

您需要在这里使用.nextAll() 和:first 选择器：

.nextAll() - 获取匹配元素集中每个元素的所有后续兄弟，可选地由选择器过滤。

:first - 将匹配元素的集合减少到集合中的第一个。

$('.dynamic').each(function() {
   var $this = $(this);
   var value = $this.val();
   $this.nextAll("input.fit").val(value);
});

【讨论】：

非常感谢 - 真的帮助了我！