Question

我的表单中有5个输入行。我需要保留两组填充之间的空白行，但要删除其余部分。例如：第1行为空白。第二行包含文本。第3行是空白的。第4行包含文本，第5行为空白。我需要仅保留第3个空白行，因为它在两条填充行之间，但删除了第1行和第5行。通过jquery而不是多次迭代输入文本行的任何简单方法吗？

<div id="formtextLines">
   <input type="text"> -->blank
    <input type="text"> --> filled line 1
    <input type="text"> --> blank
    <input type="text"> --> filled line 2
    <input type="text"> --> blank
</div>

TIA

Answer 1

嗯，不是一个可爱的jQuery单线程，但仍然只能在输入上迭代一次：

$("button").click(function() {

  var inputs = $("#formtextLines input")
  var defaultLast = inputs.length
  var lastNonBlank = defaultLast
  inputs.each(function(i) {
    if (this.value != "")
      lastNonBlank = i
    else if (lastNonBlank === defaultLast)
      $(this).remove()
  }).slice(lastNonBlank+1).remove()

})

input { display: block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button>Remove blanks</button>
<div id="formtextLines">
   <input type="text"> <!--blank-->
   <input type="text"> <!--blank-->
   <input type="text" value="Non-blank 1">
   <input type="text" value="Non-blank 2">
   <input type="text"> <!--blank-->
   <input type="text"> <!--blank-->
   <input type="text" value="Non-blank 3"> 
   <input type="text"> <!-- blank-->
   <input type="text"> <!-- blank-->
</div>

如果不明显，我们的想法是，当我们迭代时，如果我们还没有找到非空行，我们会立即删除空行，否则我们只记下最后一个非空白行的索引到目前为止看到了然后在迭代之后，我们{<1}}来自之后的最后一个非空白元素并删除它们，注意.slice()如果它的“start”参数将返回一个空集大于最后一个元素的索引（因此如果整个列表为空或者最后一行不为空，则不会出现错误。）

请注意，这没有在迭代期间从列表中删除元素会混淆以下元素的索引的问题，因为我们要从DOM中删除元素，而不是从列表中删除。

编辑：

“有什么办法可以找到第一个非空行和最后一个非空白行的索引而不是删除空行。”

是的，你可以很容易地调整我已经给你的东西 - 它比你原来要求的更容易。您已经拥有.slice()变量中的最后一个。只需摆脱lastNonBlank和.remove()调用，并为.slice()添加另一个变量，并进行适当的测试。对于没有非空白的情况，我建议使用firstNonBlank的默认值。（展开/运行以下代码段以在上下文中查看此内容。）

-1

$("button").click(function() { var firstNonBlank = -1 var lastNonBlank = -1 $("#formtextLines input").each(function(i) { if (this.value != "") { lastNonBlank = i if (firstNonBlank === -1) firstNonBlank = i } }) console.log(firstNonBlank, lastNonBlank) })

input { display: block; }

需要更好的解决方案来迭代输入线

1 个答案: