类

Question

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

无论两个输入之间是什么，我都想复制.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>

非常感谢！

Answer 1

尝试使用jQuery链接nextAll（）和first（），如下所示：

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

NextAll会找到$(this)之后的兄弟姐妹的所有元素。首先会阻止你的val调用影响任何输入，但第一个。

Answer 2

非常简单 - 您希望使用.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>

Answer 3

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

  

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

     

：首先 - 将匹配元素集合减少到集合中的第一个元素。

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