使用每个

Question

如果键入第一项的输入，则会看到它展开并且其宽度由值的长度确定。

在输入宽度与每个项目的值宽度相匹配的每个项目中，该如何迭代呢？

$(".item").each(function() {
  $(".input--span").text($(".input--item").val());
  $(".input--item").width($(".input--span").width());

  $(".item").on("input", function() {
    $(".input--span").text($(".input--item").val());
    $(".input--item").width($(".input--span").width());
  });
});

.input--item,
.input--span {
  font: inherit;
  margin: 0;
  padding: 0;
  background: green;
  color: white;
}

.input--item {
  border: none;
  min-width: 10px;
}

.input--span {
  display: none;
  white-space: pre;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="item">
  <span class="input--span"></span>
  <input class="input--item" type="text" name="name" value="Item 1 Long Text" autocomplete="off" />
</p>
<p class="item">
  <span class="input--span"></span>
  <input class="input--item" type="text" name="name" value="Item 2" autocomplete="off" />
</p>
<p class="item">
  <span class="input--span"></span>
  <input class="input--item" type="text" name="name" value="I3" autocomplete="off" />
</p>

Answer 1

^[1] 无需使用.each()，因为在这种情况下，循环将重复input事件{ 1}}元素.. 它是看不见的，但是如果您在item的{​​{1}}事件中console.log进行任何操作，则会重复

^[2] 使用input事件进行输入时，可以使用.each而不是input

^[3] 要捕获所需输入的先前范围，可以使用$(".item .input--item") .. 有更多选择器，但在这种情况下，$(".item")将是最简单的

^[4] 要运行代码加载，您可以使用.prev()触发输入事件。您可以删除它并查看引用< / em>

prev()

.trigger('input')

$(".item .input--item").on("input", function() {
  $(this).prev(".input--span").text($(this).val());
  $(this).width($(this).prev(".input--span").width());
}).trigger('input');