jQuery搜索过滤器无法正常运行

Question

搜索功能无法正确过滤结果。无论是否找到匹配项，第一行始终显示。

感谢您的帮助。

$("#search").keyup(function () {
    var value = this.value.toLowerCase().trim();

    $("table tr").each(function (index) {
        if (!index) return;
        $(this).find("td").each(function () {
            var id = $(this).text().toLowerCase().trim();
            var not_found = (id.indexOf(value) == -1);
            $(this).closest('tr').toggle(!not_found);
            return not_found;
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        
        <table>
        <tr>

        <td class="col-nome">Ixpira</td>
        <td><span class="badge badge-success">Live</span></td>
        </tr>
        <tr>

        <td class="col-nome">SunHotels</td>
        <td><span class="badge badge-success">Live</span></td>
        </tr>
        <tr>
        <td class="col-nome">World 2 Meet [W2M]</td>
        <td><span class="badge badge-success">Live</span></td>
        </tr>
        <tr>

        <td class="col-nome">ImperatoreTravel.it</td>
        <td><span class="badge badge-success">Live</span></td>
        </tr>
        </table>
        <br />
        <input type="text" id="search" placeholder="  live search"></input>

Answer 1

我不太确定为什么在代码中添加以下行：

MyValue-1MyValue2MyValue-3

但这是引起问题的原因。 jQuery if (!index) return; 基于0，因此迭代通过的第一项将导致函数返回（0等于false）。

.each()

$("#search").keyup(function () {
    var value = this.value.toLowerCase().trim();

    $("table tr").each(function (index) {
        $(this).find("td").each(function () {
            var id = $(this).text().toLowerCase().trim();
            var not_found = (id.indexOf(value) == -1);
            $(this).parents('tr').toggle(!not_found);
            return not_found;
        });
    });
});

Answer 2

$("#search").keyup(function () {
    var value = this.value.toLowerCase().trim();

    $("table tr").each(function (index) {
        $(this).find("td").each(function () {
            var id = $(this).text().toLowerCase().trim();
            var not_found = (id.indexOf(value) == -1);
            $(this).closest('tr').toggle(!not_found);
            return not_found;
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        
        <table>
        <tr>

        <td class="col-nome">Ixpira</td>
        <td><span class="badge badge-success">Live</span></td>
        </tr>
        <tr>

        <td class="col-nome">SunHotels</td>
        <td><span class="badge badge-success">Live</span></td>
        </tr>
        <tr>
        <td class="col-nome">World 2 Meet [W2M]</td>
        <td><span class="badge badge-success">Live</span></td>
        </tr>
        <tr>

        <td class="col-nome">ImperatoreTravel.it</td>
        <td><span class="badge badge-success">Live</span></td>
        </tr>
        </table>
        <br />
        <input type="text" id="search" placeholder="  live search"></input>

为什么if (!index) return;？它将跳过第一个元素

index_of_first_element = 0;

if(!index_of_first_element){
 console.log('First element skipped');
} else {
 console.log('First element not skipped');
}

Answer 3

我认为您的！index返回值为0时返回。我删除了它，现在它可以正常工作了：

$("#search").keyup(function() {
  var value = this.value.toLowerCase().trim();

  $("table tr").each(function(index) {
    $(this).find("td").each(function() {
      var id = $(this).text().toLowerCase().trim();
      var not_found = (id.indexOf(value) == -1);
      $(this).closest('tr').toggle(!not_found);
      return not_found;
    });
  });
});

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

<table>
  <tr>

    <td class="col-nome">Ixpira</td>
    <td><span class="badge badge-success">Live</span></td>
  </tr>
  <tr>

    <td class="col-nome">SunHotels</td>
    <td><span class="badge badge-success">Live</span></td>
  </tr>
  <tr>
    <td class="col-nome">World 2 Meet [W2M]</td>
    <td><span class="badge badge-success">Live</span></td>
  </tr>
  <tr>

    <td class="col-nome">ImperatoreTravel.it</td>
    <td><span class="badge badge-success">Live</span></td>
  </tr>
</table>
<br />
<input type="text" id="search" placeholder="  live search"></input>

Answer 4

您的所有代码都工作正常，只有if (!index) return;行引起了麻烦，其作用是

index返回$.each()中的数字[0,1,2,3 ...]，因此当到达第一行时，索引为0，而{{1} }，因此 if 条件得到满足并返回而没有消除第一行。

!0 = 1

$("#search").keyup(function () {
    var value = this.value.toLowerCase().trim();

    $("table tr").each(function (index) {
        
        $(this).find("td").each(function () {
            var id = $(this).text().toLowerCase().trim();
            var not_found = (id.indexOf(value) == -1);
            $(this).closest('tr').toggle(!not_found);
            return not_found;
        });
    });
});