时间戳

首页 > 解决方案 > jQuery 列表检查 .each 仅适用于最后一项

javascript - jQuery 列表检查 .each 仅适用于最后一项

问题描述

我有一个地址列表，我想检查该列表中是否也存在输入值的相同地址。问题出在我的each功能上，它似乎只检查最后一个li而不检查其余部分。

我见过类似的问题，但对我的功能没有任何作用。

这是HTML：

<ul>
  <li><span class="savedLocDropTxt2">LA Office</span><br>
    <span class="savedDropAdd2">125 Pico Blvd, Santa Monica, CA 90404, USA</span>
  </li>
  <li><span class="savedLocDropTxt2">NY Office</span><br>
  <span class="savedDropAdd2">1001 West 31st Street, NY, New York 10001, USA</span>
  </li>
    <li><span class="savedLocDropTxt2">NY Loft</span><br>
  <span class="savedDropAdd2">1453 West 21st Street, NY, New York 10001, USA</span>
  </li>
</ul>

<h4>Start Address</h4>
<input class="startAddInput2" style="width: 250px;" name="StartAddress1" type="text" value="1453 West 21st Street, NY, New York 10001, USA">
<br>
<span class="savedLocTxt2"></span>

这是JS：

$('.savedDropAdd2').each(function(){
    if($(this).text() == $(".startAddInput2").val()) {
        $('.savedLocTxt2').text('exists');
    }
  else {
    $('.savedLocTxt2').text("doesn't exist");
  }
});

这是jsfiddle

如果您将最后一个地址作为文本字段值属性，它只会显示列表中存在的地址，它应该说存在于列表中也存在的任何地址值。

标签： javascriptjquery

解决方案

There is nothing wrong in using text() method here. The problem is how to break out of the each loop after you have successfully found a match.

if you don't do this and a match is found as any other element apart from the last element, the code will always return "doesn't exit". This is because the last element will always be tested for even if a match is found among the other other elements.

To break out of the each loop immediately after finding a match, simply return false and the problem is solved.

$('.savedDropAdd2').each(function() {
  if ($(this).text() === $('.startAddInput2').val()) {
    $('.savedLocTxt2').text('exists');
    return false;
  } else {
    $('.savedLocTxt2').text("doesn't exist");
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <span class="savedLocDropTxt2">NY Loft</span><br>
    <span class="savedDropAdd2">1453 West 21st Street, NY, New York 10001, USA</span>
  </li>
  <li>
    <span class="savedLocDropTxt2">LA Office</span><br>
    <span class="savedDropAdd2">125 Pico Blvd, Santa Monica, CA 90404, USA</span>
  </li>
  <li>
    <span class="savedLocDropTxt2">NY Office</span><br>
    <span class="savedDropAdd2">1001 West 31st Street, NY, New York 10001, USA</span>
  </li>
</ul>

<h4>Start Address</h4>
<input class="startAddInput2" style="width: 250px;" name="StartAddress1" type="text" value="1453 West 21st Street, NY, New York 10001, USA"><br>
<span class="savedLocTxt2"></span>

推荐阅读