我的页面中有一些div(使用PHP
jquery构建)并且我想根据它们的属性过滤它们(如果有超过1个属性过滤,那么它将缩小搜索范围).
div的外观如下:
div的外观如下:
- <div id="solicitacoes">
- <div id='1' title='Mike' status='18' analista='23'>Whatever content 1</div>
- <div id='2' title='John' status='16' analista='46'>Whatever content 2</div>
- <div id='3' title='Tom' status='2' analista='49'>Whatever content 3</div>
- <div id='4' title='Mike' status='4' analista='23'>Whatever content 4</div>
- <div id='5' title='Kate' status='3' analista='32'>Whatever content 5</div>
- <div id='6' title='Steve' status='1' analista='14'>Whatever content 6</div>
- </div>
然后,我有一个表单来过滤div的属性:
- <div id="filtros">
- <form id="filtroSolicitacoes" type="post" name="filtroSolicitacoes">
- Protocolo: <input type="text" name="filtroProtocolo" id="filtroProtocolo" size="5"/>
- Solicitante: <input type="text" name="filtroSolicitante" id="filtroSolicitante" size="10"/>
- Status:
- <select name="filtroStatus" id="filtroStatus">
- <option value="0">-- Selecione Status--</option>
- <option value="3">Aguardando Aprovação</option>
- <option value="18">Encaminhado</option>
- <option value="2">Iniciado</option>
- <option value="1">Não Iniciado</option>
- <option value="4">Pendente de Esclarecimento</option>
- <option value="16">Reiniciado</option>
- <option value="6">Reprovado</option>
- </select>
- Analista:
- <select name="filtroAnalista" id="filtroAnalista">
- <option value="23">Robert</option>
- <option value="46">Allan</option>
- <option value="49">Edward</option>
- <option value="32">Jake</option>
- <option value="14">Stella</option>
- </select>
- <button type="submit" id="filtrar" style="float:right; margin-right:10px">:: Filtrar ::</button>
- </form>
- </div>
现在,我已经完成了大部分Jquery部分并且过滤器正在工作—>但是如果有超过1个过滤属性,我想要调低搜索范围,不要连接它,并且我的代码会发生什么
娄:
- $("#filtroSolicitacoes").submit(function() {
- $("#solicitacoes > div").show();
- var filtroProtocolo = $("#filtroProtocolo").val();
- var filtroSolicitante = $("#filtroSolicitante").val().toUpperCase();
- var filtroStatus = $("#filtroStatus").val();
- var filtroAnalista = $("#filtroAnalista").val();
- var filtroResultado = $("#filtroResultado:checked").length;
- var filtros = "[id=filtros]";
- if(filtroStatus !== "0"){
- filtros +=",[status='"+filtroStatus+"']";
- }
- if(filtroProtocolo !== ""){
- filtros +=",[id='"+filtroProtocolo+"']";
- }
- if(filtroSolicitante !== ""){
- filtros +=",[title*='"+filtroSolicitante+"']";
- }
- if(filtroAnalista !== "0"){
- filtros +=",[analista='"+filtroAnalista+"']";
- }
- if(filtros !== "[id=filtros]"){
- $("#solicitacoes > div:not("+filtros+")").hide();
- }
- return false;
- });
我试过用“&&”而不是“,”in
- filtros +=",[analista='"+filtroAnalista+"']";
但它不起作用.
有任何想法吗?
PS:抱歉我的英语不好,我是巴西人:)
解决方法
你应该使用filter()函数:
- var filteredList = elements
- .filter("[status=status1]")
- .filter("[title*=something]");
- // and so on
在你的例子中:
- $("#filtroSolicitacoes").submit(function() {
- $("#solicitacoes > div").show();
- var filtroProtocolo = $("#filtroProtocolo").val();
- var filtroSolicitante = $("#filtroSolicitante").val().toUpperCase();
- var filtroStatus = $("#filtroStatus").val();
- var filtroAnalista = $("#filtroAnalista").val();
- var filtroResultado = $("#filtroResultado:checked").length;
- var elements = $("[id=filtros]");
- if(filtroStatus !== "0"){
- elements = elements.filter("[status='"+filtroStatus+"']");
- }
- if(filtroProtocolo !== ""){
- elements = elements.filter("[id='"+filtroProtocolo+"']");
- }
- // and so on
- $("#solicitatcoes > div").not(elements).hide();
- return false;
- });