jquery - 在不同的 div 中过滤搜索

Question

我试图过滤我程序中的文章以在 jquery 中搜索，这是有效的，问题是我只希望它在确定的 div 中搜索，而不是搜索我所有的文章，就像我在 div“processador”中搜索，例如在“grafica”中搜索。

http://prntscr.com/iuqsxu

http://prntscr.com/iuqsnl

查询

var divs = $('.expandContent');
$('.expand').each(function () {
    $(this).find('.product-removal').slice(2).hide();
    $(".search").on("keyup", function() {
        var value = $(this).val().toLowerCase();
      $('div.product-removal article.product').each(function() {
          $(this).toggle($(this).html().toLowerCase().indexOf(value) > -1);
      });
    });
});

处理器代码

<div id="processador" class="expandContent expand">
        <h3 class="header">
            <div class="headerColumn1">Processador</div>
            <div class="headerColumn2 expand"><img src="img/plus.png"/></div>
            <div class="expandedContentClearFloat"></div>
        </h3>
        <div class="expandedContent">
          <input type="text" class="search" placeholder="Search...">
            {% for item in processador %}

            <div class="product-removal"  >

                <article class="product">
                    <header>
                        <img src="{{ item.img|e }}">
                    </header>
                    <div class="content" >
                        <button name="proc" id="{{ item.id|e }}" type="button"
                                class="close close-processador pull-right" aria-label="Close"
                                data-id="{{ item.id|e }}" data-preco="{{ item.preco_unit|e }}">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h1>{{ item.marca|e }}</h1>
                        {{ item.descr|e }}
                    </div>
                    <footer class="content">
                        <h2 class="full-price fixed fixed-processador">
                            {{ item.preco_unit|e }}€
                        </h2>
                        <a data-versao="{{item.versao|e}}" class="adicionar adicionar-processador pull-right full-price"
                           data-modelo="{{ item.modelo|e }}" data-id="{{ item.id|e }}"
                           data-preco="{{ item.preco_unit|e }}">
                            <h2 class="full-price">
                                {{ item.preco_unit|e }}€
                            </h2>
                        </a>
                        <h2 class="price">
                            {{ item.preco_unit|e }}
                        </h2>
                    </footer>
                </article>
            </div>

            {% endfor %}
            <button class="mostrar" data-estado="mostrar">mostrar</button>
        </div>
    </div>

/显卡代码

<div id="grafica" class="expandContent expand">
        <h3 class="header">
            <div class="headerColumn1">Graficas</div>
            <div class="headerColumn2 expand"><img src="img/plus.png"/></div>
            <div class="expandedContentClearFloat"></div>
        </h3>
        <div class="expandedContent">
          <input type="text" class="search" placeholder="Search...">
            {% for item in placagrafica %}
            <div class="product-removal">
                <article class="product">
                    <header>
                        <img src="{{ item.img|e }}" class="iconcomp">
                    </header>
                    <div class="content">
                        <button name="proc" id="{{ item.id|e }}" type="button"
                                class="close close-grafica pull-right" aria-label="Close"
                                data-id="{{ item.id|e }}" data-preco="{{ item.preco_unit|e }}" data-quantidade="">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h1>{{ item.marca|e }}</h1>
                        {{ item.descr|e }}
                    </div>
                    <footer class="content">
                        <span class="qt-minus">-</span>
                        <span class="qt" id="quantgraf" data-id="{{ item.id|e }}">1</span>
                        <span class="qt-plus">+</span>
                        <h2 class="full-price fixed fixed-grafica">
                            {{ item.preco_unit|e }}€
                        </h2>
                        <a data-versao="{{item.versao|e}}" class="adicionar adicionar-grafica pull-right full-price"
                           data-modelo="{{ item.modelo|e }}" data-id="{{ item.id|e }}"
                           data-preco="{{ item.preco_unit|e }}" data-quantidade="">
                            <h2 class="full-price">
                                {{ item.preco_unit|e }}€
                            </h2>
                        </a>
                        <h2 class="price">
                            {{ item.preco_unit|e }}
                        </h2>
                    </footer>
                </article>
            </div>
            {% endfor %}
            <button class="mostrar" data-estado="mostrar">mostrar</button>
        </div>
    </div>

Answer 1

从代码中，您尝试从所有产品中进行搜索。$('div.product-removal article.product') 将返回来自#processador 和#grafica 的所有.products，因为它们都具有相同的类名。

您应该更新您的代码以仅在该特定部分内进行搜索。

$(".expand .search").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $(this).parent().find('article.product').each(function() {
        if ($(this).html().toLowerCase().indexOf(value) > -1)) {
            $(this).show();
        } else {
            $(this).hide();
        }
     });
});

我还稍微优化了您的代码。

$(this).parent().find('article.product') 将只选择该部分中的产品。