Question

我有一个页面，最终将有10个不同的UL，每个LI中有多个DIV，应该可以搜索LI中的每个DIV。每个搜索框应该单独搜索自己的UL，而不会影响页面中的其他UL。我目前使用的解决方案是复制搜索代码，同时以数字方式递增选择器。这会产生很多冗余。

如何限制冗余并让每次搜索仍然只影响它自己的UL？

以下是递增的代码（为简洁起见，只有两次而不是全部10次）：

HTML：

<h1>Search One</h1>
<input type="text" id="search1" value="" placeholder="enter search text" /> 

<div id="results1">
  <ul>
    <li>
      <div class="listing-three">Apple</div>|
      <div class="listing-three">Banana</div>|
      <div class="listing-three">Cherry</div>
    </li>
    <li>
      <div class="listing-three">Apple</div>|
      <div class="listing-three">Banana</div>|
      <div class="listing-three">Cucumber</div>
    </li>
    <li>
      <div class="listing-three">Apple</div>|
      <div class="listing-three">Berry</div>|
      <div class="listing-three">Cheese</div>
    </li>
  </ul>
</div>
<h1>Search Two</h1>
<input type="text" id="search2" value="" placeholder="enter search text" />

<div id="results2">
  <ul>
    <li>
      <div class="listing-three">Apple</div>|
      <div class="listing-three">Banana</div>|
      <div class="listing-three">Cherry</div>
    </li>
    <li>
      <div class="listing-three">Apple</div>|
      <div class="listing-three">Banana</div>|
      <div class="listing-three">Cucumber</div>
    </li>
    <li>
      <div class="listing-three">Apple</div>|
      <div class="listing-three">Berry</div>|
      <div class="listing-three">Cheese</div>
    </li>
  </ul>
</div>

JQuery

$("#search1").keyup(function() {
  var searchText = $(this).val().toLowerCase();
  $("#results1 li").each(function() {
    console.log($(this).text());
    var string = $(this).text().toLowerCase();
    if (string.indexOf(searchText) != -1) {
      $(this).show("slow");
    } else {
      $(this).hide("slow");
    }
  });
});

$("#search2").keyup(function() {
  var searchText = $(this).val().toLowerCase();
  $("#results2 li").each(function() {
    console.log($(this).text());
    var string = $(this).text().toLowerCase();
    if (string.indexOf(searchText) != -1) {
      $(this).show("slow");
    } else {
      $(this).hide("slow");
    }
  });
});

我已经包含了一个小提琴，以便于解释和清晰的功能。

https://jsfiddle.net/MercyMayaGames/1pbwc98j/

Answer 1

#if APPLE_KEXT_VTABLE_PADDING
#define OSMetaClassDeclareReservedUnused(className, index)        \
    private:                                                      \
    virtual void _RESERVED ## className ## index ()
#else
#define OSMetaClassDeclareReservedUnused(className, index)
#endif

我已使用//$("#search2").keyup(function() { $(".search").keyup(function() { var searchText = $(this).val().toLowerCase(); $(this).find("+ .results li").each(function() { console.log($(this).text()); var string = $(this).text().toLowerCase(); if (string.indexOf(searchText) != -1) { $(this).show("slow"); } else { $(this).hide("slow"); } }); });更改了#search2，这意味着您还应该在所有搜索框中添加一个类.search。同样，您需要将search类添加到所有结果div。您可以根据自己的选择使用班级名称。

Answer 2

在输入框中，提供一个属性以指示它的列表

<input type="text" id="search1" value="" placeholder="enter search text" class="searcher" data-search-in="results1"/>

注意最后两个属性class和data-search-in

现在您可以将代码重构为

$(".searcher").keyup(function() {
  var searchText = $(this).val().toLowerCase();
  var searchIn = $(this).attr("data-search-in");
  $("#" + searchIn + " li").each(function() {
    console.log($(this).text());
    var string = $(this).text().toLowerCase();
    if (string.indexOf(searchText) != -1) {
      $(this).show("slow");
    } else {
      $(this).hide("slow");
    }
  });
});

Answer 3

使用类

<input type="text" class="search" value="" placeholder="enter search text" /> 

<div class="results">

....

并根据DOM中的位置定位元素

$(".search").on('keyup', function() {
    var searchText = this.value.toLowerCase();

    $(this).next('.results').find('li').each(function() {

        var string = $(this).text().toLowerCase();

        if (string.indexOf(searchText) != -1) {
            $(this).show("slow");
        } else {
            $(this).hide("slow");
        }
    });
});

FIDDLE

Multipe JQuery在单个页面中搜索

3 个答案: