我试图过滤我在我的程序中的文章到jquery中的搜索工作,问题是我只想让它在一个确定的div中搜索但是这是搜索我所有的文章,如果我在div" processador"中搜索,这是在" grafica"例如。
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">×</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">×</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>
答案 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}}正在申请匹配的元素。