过滤搜索不同的div

时间:2018-03-22 10:48:48

标签: jquery html twig

我试图过滤我在我的程序中的文章到jquery中的搜索工作,问题是我只想让它在一个确定的div中搜索但是这是搜索我所有的文章,如果我在div" processador"中搜索,这是在" grafica"例如。

http://prntscr.com/iuqsxu

http://prntscr.com/iuqsnl

Jquery的

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);
      });
    });
});

Processador代码

<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>

/ grafic卡代码

<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>

2 个答案:

答案 0 :(得分:3)

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

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

// client side
for (;;)
{
    nfds = epoll_wait( epollfd_, events, MAX_EVENTS, -1 );
    if ( nfds == -1 )
    {
        Print("--tcp client, epoll_wait error: %s\n", strerror(errno) );
        break;
    }

    Print( "--tcp epoll waiting %d ...\n", nfds );
    for ( n = 0; n < nfds; ++n )
    {
        if ( events[n].data.fd == sockfd_ )
        {

            switch ( events[n].events )
            {
                case EPOLLIN:
                {
                    char buffer[1024];
                    for(;;)
                    {
                        ssize_t n_read = read( events[n].data.fd, buffer, sizeof(buffer) );
                        if ( n_read == -1 )
                        {
                            if ( errno == EWOULDBLOCK || errno == EAGAIN )
                            {
                                Print("--tcp client, read finished\n");
                                continue;
                            }
                            else
                            {
                                Print("--tcp client read error!\n");
                                break;
                            }
                        }
                        else if ( n_read == 0 )
                        {
                            Print("--tcp client read EOF\n");
                            break;
                        }
                        else
                        {
                            Print("--tcp client continue reading");
                            continue;
                        }
                    }

                    break;
                }
                case EPOLLOUT:
                {
                    if ( !connected )
                    {
                        int sock_err = 0;
                        socklen_t socklen = sizeof(int);
                        int n_sockopt = getsockopt( sockfd_, SOL_SOCKET, SO_ERROR, &sock_err, &socklen );
                        if ( n_sockopt == 0 )
                        {
                            if ( sock_err == 0 )
                            {
                                connected = true;
                                Print( "--tcp client, connected to %s success!\n", ip );
                            }
                            else
                            {
                                Print("--tcp client, failed to connect to %s\n", ip );
                            }
                        }
                        else
                        {
                            Print("--tcp client, failed to getsockopt %s\n", strerror( errno ) );
                        }
                    }
                    else
                    {
                        Print("--tcp client, ok to write to server\n");
                        if ( !sendBuffer_.empty() )
                        {
                            ssize_t written = 0;
                            ssize_t n_write = 0;
                            for(;;)
                            {
                                n_write = write( sockfd_, sendBuffer_.data() + written, sendBuffer_.size() );
                                if ( -1 == n_write )
                                {
                                    if ( errno == EAGAIN || errno == EWOULDBLOCK )
                                    {
                                        Print("--tcp client, write finished\n");
                                        break;
                                    }
                                    else
                                    {
                                        Print("--tcp client failed to write\n");
                                        break;
                                    }
                                }
                                else
                                {
                                    written += n_write;
                                    continue;
                                }
                            }
                        }
                    }

                    break;
                }
                case EPOLLERR:
                    Print("--tcp client epoll error\n");
                    break;
                case EPOLLHUP:
                    Print("--tcp epoll hup\n");
                    break;
                default:
                    Print("--tcp client unkown event %04x\n", events[n].events );
                    break;
            }

        }

    }
}

//----------------------------------------------------------------

// server side
for (;;)
{
    nfds = epoll_wait( epollfd_, events, MAX_EVENTS, EPOLL_TIMEOUT_MS );
    if ( nfds == -1 )
    {
        Print("--tcp server, epoll_wait error: %s\n", strerror(errno) );
        break;
    }

    Print( "--tcp epoll waiting %d...\n", nfds );
    for ( n = 0; n < nfds; ++n )
    {
        if ( events[n].events & EPOLLERR ||
                events[n].events & EPOLLHUP ||
                !(events[n].events & EPOLLIN) )
        {
            Print("--tcp server, epoll error\n");
            continue;
        }
        else if ( events[n].data.fd == sockfd_ )
        {
            sockaddr_in addr;
            socklen_t addrlen = sizeof( sockaddr_in );
            conn_sock = accept4( sockfd_, (struct sockaddr *) &addr, &addrlen, SOCK_NONBLOCK );
            if ( conn_sock == -1 )
            {
                Print("--tcp server accept4 failed\n");
                continue;
            }
            else
            {
                char ipStr[INET_ADDRSTRLEN];
                inet_ntop(PF_INET, &(addr.sin_addr), ipStr, INET_ADDRSTRLEN);
                Print("--tcp server, accept connection from %s\n", ipStr);
                // add remote fd to epoll interest list
                epoll_event ee{};
                ee.events = EPOLLIN | EPOLLET;
                ee.data.fd = conn_sock;
                if ( epoll_ctl( epollfd_, EPOLL_CTL_ADD, conn_sock, &ee ) == -1 )
                {
                    Print("--tcp server, failed to epoll_ctl\n");
                    continue;
                }
            }
        }
        else // remote fd
        {
            Print("--tcp server, read and write\n");
            char buffer[1024];
            for (;;)
            {
                ssize_t n_read = read(events[n].data.fd, buffer, sizeof(buffer));
                if (n_read == -1)
                {
                    if (errno == EWOULDBLOCK || errno == EAGAIN)
                    {
                        Print("--tcp read finish\n");
                        break;
                    }
                    else
                    {
                        Print("--tcp server read error!\n");
                        break;
                    }
                }
                else if (n_read == 0)
                {
                    Print("--tcp server read EOF, client closed\n");
                    break;
                }
                else
                {
                    Print("--tcp server continue reading");
                    continue;
                }
            }

            /**
             * write data in send buffer back to client
             */
            if (!sendBuffer_.empty())
            {
                int written = 0;
                for (;;)
                {
                    ssize_t n_write = write(events[n].data.fd, sendBuffer_.data() + written,
                                            sendBuffer_.size() - written);
                    if (n_write == -1)
                    {
                        if (errno == EWOULDBLOCK || errno == EAGAIN)
                        {
                            Print("--tcp server, write finished\n");
                            break;
                        }
                        else
                        {
                            Print("--tcp server, write error %s\n", strerror(errno));
                            break;
                        }
                    } else if (n_write == 0)
                    {
                        Print("--tcp server, write finish\n");
                        break;
                    } else
                    {
                        written += n_write;
                    }
                }

                sendBuffer_.clear();
            }


        }
    }
}

我还对您的代码进行了一些优化。

$(this).parent()。find(&#39; article.product&#39;)只会选择该部分内的产品。

答案 1 :(得分:0)

  

类选择器返回一组元素。

     

id选择器返回带有匹配id的第一个元素的单个元素。

两个div都具有相同的类,并且您正在课堂上应用JQuery函数。相反,你为每个div提供唯一的ID。

即,在搜索时,您正在使用$('div.product-removal article.product')进行操作,{{1}}正在申请匹配的元素。