使用Jquery的多个过滤器

前端之家收集整理的这篇文章主要介绍了使用Jquery的多个过滤器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我的页面中有一些div(使用PHP jquery构建)并且我想根据它们的属性过滤它们(如果有超过1个属性过滤,那么它将缩小搜索范围).
div的外观如下:
  1. <div id="solicitacoes">
  2. <div id='1' title='Mike' status='18' analista='23'>Whatever content 1</div>
  3. <div id='2' title='John' status='16' analista='46'>Whatever content 2</div>
  4. <div id='3' title='Tom' status='2' analista='49'>Whatever content 3</div>
  5. <div id='4' title='Mike' status='4' analista='23'>Whatever content 4</div>
  6. <div id='5' title='Kate' status='3' analista='32'>Whatever content 5</div>
  7. <div id='6' title='Steve' status='1' analista='14'>Whatever content 6</div>
  8. </div>

然后,我有一个表单来过滤div的属性

  1. <div id="filtros">
  2. <form id="filtroSolicitacoes" type="post" name="filtroSolicitacoes">
  3. Protocolo: <input type="text" name="filtroProtocolo" id="filtroProtocolo" size="5"/>
  4. Solicitante: <input type="text" name="filtroSolicitante" id="filtroSolicitante" size="10"/>
  5. Status:
  6. <select name="filtroStatus" id="filtroStatus">
  7. <option value="0">-- Selecione Status--</option>
  8. <option value="3">Aguardando Aprova&ccedil;&atilde;o</option>
  9. <option value="18">Encaminhado</option>
  10. <option value="2">Iniciado</option>
  11. <option value="1">N&atilde;o Iniciado</option>
  12. <option value="4">Pendente de Esclarecimento</option>
  13. <option value="16">Reiniciado</option>
  14. <option value="6">Reprovado</option>
  15. </select>
  16. Analista:
  17. <select name="filtroAnalista" id="filtroAnalista">
  18. <option value="23">Robert</option>
  19. <option value="46">Allan</option>
  20. <option value="49">Edward</option>
  21. <option value="32">Jake</option>
  22. <option value="14">Stella</option>
  23. </select>
  24. <button type="submit" id="filtrar" style="float:right; margin-right:10px">:: Filtrar ::</button>
  25. </form>
  26. </div>

现在,我已经完成了大部分Jquery部分并且过滤器正在工作—>但是如果有超过1个过滤属性,我想要调低搜索范围,不要连接它,并且我的代码会发生什么
娄:

  1. $("#filtroSolicitacoes").submit(function() {
  2. $("#solicitacoes > div").show();
  3. var filtroProtocolo = $("#filtroProtocolo").val();
  4. var filtroSolicitante = $("#filtroSolicitante").val().toUpperCase();
  5. var filtroStatus = $("#filtroStatus").val();
  6. var filtroAnalista = $("#filtroAnalista").val();
  7. var filtroResultado = $("#filtroResultado:checked").length;
  8.  
  9. var filtros = "[id=filtros]";
  10.  
  11. if(filtroStatus !== "0"){
  12. filtros +=",[status='"+filtroStatus+"']";
  13. }
  14. if(filtroProtocolo !== ""){
  15. filtros +=",[id='"+filtroProtocolo+"']";
  16. }
  17. if(filtroSolicitante !== ""){
  18. filtros +=",[title*='"+filtroSolicitante+"']";
  19. }
  20. if(filtroAnalista !== "0"){
  21. filtros +=",[analista='"+filtroAnalista+"']";
  22. }
  23.  
  24. if(filtros !== "[id=filtros]"){
  25. $("#solicitacoes > div:not("+filtros+")").hide();
  26. }
  27. return false;
  28. });

我试过用“&&”而不是“,”in

  1. filtros +=",[analista='"+filtroAnalista+"']";

但它不起作用.

有任何想法吗?

PS:抱歉我的英语不好,我是巴西人:)

解决方法

你应该使用filter()函数
  1. var filteredList = elements
  2. .filter("[status=status1]")
  3. .filter("[title*=something]");
  4. // and so on

在你的例子中:

  1. $("#filtroSolicitacoes").submit(function() {
  2. $("#solicitacoes > div").show();
  3. var filtroProtocolo = $("#filtroProtocolo").val();
  4. var filtroSolicitante = $("#filtroSolicitante").val().toUpperCase();
  5. var filtroStatus = $("#filtroStatus").val();
  6. var filtroAnalista = $("#filtroAnalista").val();
  7. var filtroResultado = $("#filtroResultado:checked").length;
  8.  
  9. var elements = $("[id=filtros]");
  10.  
  11. if(filtroStatus !== "0"){
  12. elements = elements.filter("[status='"+filtroStatus+"']");
  13. }
  14. if(filtroProtocolo !== ""){
  15. elements = elements.filter("[id='"+filtroProtocolo+"']");
  16. }
  17.  
  18. // and so on
  19.  
  20. $("#solicitatcoes > div").not(elements).hide();
  21.  
  22. return false;
  23. });

猜你在找的jQuery相关文章