jquery筛选查询

html 主要需要筛选这两个蓝框的input； 注释代码写的很详细，有类似功能的朋友们可以参考一下，

大致思路是通过switch来决定某一侧的选中的条件是什么，再到另一侧循环并找到他的兄弟标签的value值来精确判断

需要的是哪一个div ，本人初次写这种功能，耗费了大半天的时间，终于是可以用了，希望可以帮助大家节省时间，不足之处

还请见谅 ，好在可以用......

此处是html

<div   class="nav" id="nav">
    <p class="set">套系</p>
    <ul class="new box">
        <li>全部</li>
        <li>自然之心</li>
        <li>极简年华</li>
        <li>时光海</li>
        <li>西雅图</li>
        <li>翰墨拾香</li>
        <li>爆款儿童房</li>
        <li>科技儿童房</li>
    </ul>
</div> 

<div  class="nav2" id="nav2">
    <p  class="set2">空间</p>
    <ul class="new2 box">
        <li>全部</li>
        <li>客餐厅</li>
        <li>主卧</li>
        <li>儿童房</li>
        <li>多功能房</li>
        <li>书房</li>
        <li>衣帽间</li>
        <li>阳台</li>
        <li>玄关</li>
    </ul>
</div>

 <div class="wy-Module " style="margin-left: 5px;">
     <input class = "input2 "   type="text"/>
    <div class="wy-Module-con" >
     <a href="https://yun.kujiale.com/design/3FO4IK3SDTLA/show">
      <div id = "background1" style="text-align: center; ">
          <img  id = "bofang" src="upload/121.jpg" alt="点我播放" />
      </div>
   
      <input  type="text" class = "danlisty"   value = "翰墨拾香" >  </input>
      <input  type="text" class = "danlisty2"   value = "玄关" >  </input>
         <input class = "input3 "   type="text"/>
         </a>    
       <a href="https://yun.kujiale.com/design/3FO4IK3SDTLA/show">
      <div id = "background1" style="text-align: center; ">
          <img  id = "bofang" src="upload/121.jpg" alt="点我播放" />
      </div>
   
      <input  type="text" class = "danlisty"   value = "自然之心" >  </input>
      <input  type="text" class = "danlisty2"   value = "玄关" >  </input>
         <input class = "input3 "   type="text"/>
         </a>    
      <a href="https://yun.kujiale.com/design/3FO4IK3SDTLA/show">
      <div id = "background1" style="text-align: center; ">
          <img  id = "bofang" src="upload/121.jpg" alt="点我播放" />
      </div>
   
      <input  type="text" class = "danlisty"   value = "时光海" >  </input>
      <input  type="text" class = "danlisty2"   value = "客餐厅" >  </input>
         <input class = "input3 "   type="text"/>
         </a>     
     
         <a href="https://yun.kujiale.com/design/3FO4IK3SDTLA/show">
      <div id = "background2"  >
          <img   id = "bofang" src="upload/121.jpg" alt="点我播放" />
      </div>
   
      <input  type="text"  class = "danlisty"   value = "自然之心" />
      <input   type="text" class = "danlisty2"   value = "阳台" >  </input> 
         <input class = "input3 "   type="text"/>
         </a>
          <a href="https://yun.kujiale.com/design/3FO4IK3SDTLA/show">
      <div id = "background2"  >
          <img   id = "bofang" src="upload/121.jpg" alt="点我播放" />
      </div>
   
      <input  type="text"  class = "danlisty"   value = "翰墨拾香" />
      <input   type="text" class = "danlisty2"   value = "主卧" >  </input> 
         <input class = "input3 "   type="text"/>
         </a>
          <a href="https://yun.kujiale.com/design/3FO4IK3SDTLA/show">
      <div id = "background2"  >
          <img   id = "bofang" src="upload/121.jpg" alt="点我播放" />
      </div>
   
      <input  type="text"  class = "danlisty"   value = "极简年华" />
      <input   type="text" class = "danlisty2"   value = "客餐厅" >  </input> 
         <input class = "input3 "   type="text"/>
         </a>
          <a href="https://yun.kujiale.com/design/3FO4IK3SDTLA/show">
      <div id = "background2"  >
          <img   id = "bofang" src="upload/121.jpg" alt="点我播放" />
      </div>
   
      <input  type="text"  class = "danlisty"   value = "极简年华" />
      <input   type="text" class = "danlisty2"   value = "客餐厅" >  </input> 
         <input class = "input3 "   type="text"/>
         </a>
    </div>
      <input class = "input3 "   type="text"/>
      </div>
 </div>

------------------------------------------------下方为js---------------------------------------------------------

/*筛选1*/
 //记录第一个p的文字
    var p1;
    $(".nav li").click(function(){
         
        //得到点击的li的文本
        var li=$(this).html();
        //重新给p复制
        $(".nav p").html(li);
         //记录选中时p的内容
        var pText = $(".nav p").html();
         p1 = pText;
        $(".new").hide();
        $("p").removeClass("select") ;
        //先判断 p2是否有内容
        if(p2){
            //不为空说明第二个筛选条件已存在
             switch(p2)
        {
            case "全部":
                //循环第一个input 的到文本
                $('.wy-Module-con .danlisty').each(function(){
                      
                     var inputText = $(this).val();
                        //先判断pText是否为全部
                        if(pText == '全部'){
                            //全部显示
                            $(this).parent().show();
                        }//用当前p的文本进行比较，如果相同说明是这个input        
                        else if(pText == inputText){
                            //此时为相同，显示
                            $(this).parent().show();
                        }else{
                            //此时不同
                            $(this).parent().hide();
                        }
                    })
                      break;
            case "客餐厅":
                $('.wy-Module-con .danlisty2 ').each(function(){
                    
                    var inputText = $(this).val();
                    //先判断右边的pText是否为客餐厅
                    if(inputText == '客餐厅'){
                        //得到它上一个子节点的value，也就是左边的input
                        var a = $(this).prev().attr("value");
                        //用当前p的文本进行比较，如果相同说明是这个input
                        if(a == pText){
                        //此时为相同，显示
                        $(this).parent().show();
                        }else{
                        //此时不同
                        $(this).parent().hide();
                            
                        }
                    }        
                });
                    break;
            case "主卧":
                    $('.wy-Module-con .danlisty2 ').each(function(){
                    var inputText = $(this).val();
                    //先判断右边的pText是否为主卧
                    if(inputText == '主卧'){
                        //得到它上一个子节点的value，也就是左边的input
                        var a = $(this).prev().attr("value");
                        //用当前p的文本进行比较，如果相同说明是这个input
                        if(a == pText){
                        //此时为相同，显示
                        $(this).parent().show();
                        }else{
                        //此时不同
                        $(this).parent().hide();
                            
                        }
                    }        
                });
                    break;
            case "儿童房":
    $('.wy-Module-con .danlisty2 ').each(function(){
                    
                    var inputText = $(this).val();
                    //先判断右边的pText是否为儿童房
                    if(inputText == '儿童房'){
                        //得到它上一个子节点的value，也就是左边的input
                        var a = $(this).prev().attr("value");
                        //用当前p的文本进行比较，如果相同说明是这个input
                        if(a == pText){
                        //此时为相同，显示
                        $(this).parent().show();
                        }else{
                        //此时不同
                        $(this).parent().hide();
                        }
                    }        
                });
                    break;
            case "多功能房":
    $('.wy-Module-con .danlisty2 ').each(function(){
                    
                    var inputText = $(this).val();
                    //先判断右边的pText是否为多功能房
                    if(inputText == '多功能房'){
                        //得到它上一个子节点的value，也就是左边的input
                        var a = $(this).prev().attr("value");
                        //用当前p的文本进行比较，如果相同说明是这个input
                        if(a == pText){
                        //此时为相同，显示
                        $(this).parent().show();
                        }else{
                        //此时不同
                        $(this).parent().hide();
                            
                        }
                    }        
                     
                  
                
                    
                    
                });
                    break;
            case "书房":
    $('.wy-Module-con .danlisty2 ').each(function(){
                    
                    var inputText = $(this).val();
                    //先判断右边的pText是否为书房
                    if(inputText == '书房'){
                        //得到它上一个子节点的value，也就是左边的input
                        var a = $(this).prev().attr("value");
                        //用当前p的文本进行比较，如果相同说明是这个input
                        if(a == pText){
                        //此时为相同，显示
                        $(this).parent().show();
                        }else{
                        //此时不同
                        $(this).parent().hide();
                            
                        }
                    }        
                });
                    break;
            case "衣帽间":
    $('.wy-Module-con .danlisty2 ').each(function(){
                    
                    var inputText = $(this).val();
                    //先判断右边的pText是否为衣帽间衣帽间
                    if(inputText == '衣帽间'){
                        //得到它上一个子节点的value，也就是左边的input
                        var a = $(this).prev().attr("value");
                        //用当前p的文本进行比较，如果相同说明是这个input
                        if(a == pText){
                        //此时为相同，显示
                        $(this).parent().show();
                        }else{
                        //此时不同
                        $(this).parent().hide();
                            
                        }
                    }        
                });
                    break;
            case "阳台":
    $('.wy-Module-con .danlisty2 ').each(function(){
                    
                    var inputText = $(this).val();
                    //先判断右边的pText是否为阳台
                    if(inputText == '阳台'){
                        //得到它上一个子节点的value，也就是左边的input
                        var a = $(this).prev().attr("value");
                        //用当前p的文本进行比较，如果相同说明是这个input
                        if(a == pText){
                        //此时为相同，显示
                        $(this).parent().show();
                        }else{
                        //此时不同
                        $(this).parent().hide();
                            
                        }
                    }        
                });
                    break;
            case "玄关":
    $('.wy-Module-con .danlisty2 ').each(function(){
                    
                    var inputText = $(this).val();
                    //先判断右边的pText是否为玄关
                    if(inputText == '玄关'){
                        //得到它上一个子节点的value，也就是左边的input
                        var a = $(this).prev().attr("value");
                        //用当前p的文本进行比较，如果相同说明是这个input
                        if(a == pText){
                        //此时为相同，显示
                        $(this).parent().show();
                        }else{
                        //此时不同
                        $(this).parent().hide();
                            
                        }
                    }        
                });
                    break;
        default:
        }
                
            
        }else{
        //循环第一个input 的到文本
        $('.wy-Module-con .danlisty').each(function(){
              
             var inputText = $(this).val();
                //先判断pText是否为全部
                if(pText == '全部'){
                    //全部显示
                    $(this).parent().show();
                }//用当前p的文本进行比较，如果相同说明是这个input        
                else if(pText == inputText){
                    //此时为相同，显示
                    $(this).parent().show();
                }else{
                    //此时不同
                    $(this).parent().hide();
                }
            })
        }
    });
    $(".set2").click(function(){
        var _name = $(this).attr("name");
        if( $("[name="+_name+"]").length > 1 ){
            $("[name="+_name+"]").removeClass("select2");
            $(this).addClass("select2");
        } else {
            if( $(this).hasClass("select2") ){
                $(this).removeClass("select2");
            } else {
                $(this).addClass("select2");
            }
        }
    });
 
    /*筛选2*/
    //记录第二个p的文字
    var p2;
    $(".nav2 li").click(function(){
        //得到点击的li的文本
        var li=$(this).html();
        //重新给p赋值
        $(".nav2 p").html(li);
        //拿到p内容
        var pText = $(".nav2 p").html();
        p2 = pText;
        $(".new2").hide();
        $("p").removeClass("select2") ;   
        //先判断p1是否有只，有说明有筛选条件
        if(p1){
            //不为空说明第二个筛选条件已存在
             switch(p1)
        {
            case "全部":
                $('.wy-Module-con .danlisty2 ').each(function(){
                    
                    var inputText = $(this).val();
                    //先判断pText是否为全部
                    if(pText == '全部'){
                        //全部显示
                        $(this).parent().show();
                    }//用当前p的文本进行比较，如果相同说明是这个input        
                    else if(pText == inputText.trim()){
                        //此时为相同，显示
                        $(this).parent().show();
                    }else{
                        //此时不同
                        $(this).parent().hide();
                    }
                });
                      break;
            case "自然之心":
                $('.wy-Module-con .danlisty').each(function(){
                    var inputText = $(this).val();
                    //先判断左边的pText是否为自然之心
                    if(inputText == '自然之心'){
                        //得到它下一个子节点的value，也就是右边的input
                        var a = $(this).next().attr("value");
                        //用当前p的文本进行比较，如果相同说明是这个input
                        if(a == pText){ 
                        //此时为相同，显示
                        $(this).parent().show();
                        }else{
                        //此时不同
                        $(this).parent().hide();
                            
                        }
                    }        
                });
                    break;
            case "极简年华":
                $('.wy-Module-con .danlisty').each(function(){
                    var inputText = $(this).val();
                    //先判断左边的pText是否为极简年华
                    if(inputText == '极简年华'){
                        //得到它下一个子节点的value，也就是右边的input
                        var a = $(this).next().attr("value");
                        //用当前p的文本进行比较，如果相同说明是这个input
                        if(a == pText){ 
                        //此时为相同，显示
                        $(this).parent().show();
                        }else{
                        //此时不同
                        $(this).parent().hide();
                            
                        }
                    }        
                });
                    break;
            case "时光海":
                $('.wy-Module-con .danlisty').each(function(){
                    var inputText = $(this).val();
                    //先判断左边的pText是否为时光海
                    if(inputText == '时光海'){
                        //得到它下一个子节点的value，也就是右边的input
                        var a = $(this).next().attr("value");
                        //用当前p的文本进行比较，如果相同说明是这个input
                        if(a == pText){ 
                        //此时为相同，显示
                        $(this).parent().show();
                        }else{
                        //此时不同
                        $(this).parent().hide();
                            
                        }
                    }        
                });
                    break;
            case "西雅图":
                $('.wy-Module-con .danlisty').each(function(){
                    var inputText = $(this).val();
                    //先判断左边的pText是否西雅图
                    if(inputText == '西雅图'){
                        //得到它下一个子节点的value，也就是右边的input
                        var a = $(this).next().attr("value");
                        //用当前p的文本进行比较，如果相同说明是这个input
                        if(a == pText){ 
                        //此时为相同，显示
                        $(this).parent().show();
                        }else{
                        //此时不同
                        $(this).parent().hide();
                            
                        }
                    }        
                });
                    break;
            case "翰墨拾香":
                $('.wy-Module-con .danlisty').each(function(){
                    var inputText = $(this).val();
                    //先判断左边的pText是否为翰墨拾香
                    if(inputText == '翰墨拾香'){
                        //得到它下一个子节点的value，也就是右边的input
                        var a = $(this).next().attr("value");
                        //用当前p的文本进行比较，如果相同说明是这个input
                        if(a == pText){ 
                        //此时为相同，显示
                        $(this).parent().show();
                        }else{
                        //此时不同
                        $(this).parent().hide();
                            
                        }
                    }        
                });
                break;
            case "爆款儿童房":
                $('.wy-Module-con .danlisty').each(function(){
                    var inputText = $(this).val();
                    //先判断左边的pText是否为爆款儿童房
                    if(inputText == '爆款儿童房'){
                        //得到它下一个子节点的value，也就是右边的input
                        var a = $(this).next().attr("value");
                        //用当前p的文本进行比较，如果相同说明是这个input
                        if(a == pText){ 
                        //此时为相同，显示
                        $(this).parent().show();
                        }else{
                        //此时不同
                        $(this).parent().hide();
                            
                        }
                    }        
                });
                break;
            case "科技儿童房":
                $('.wy-Module-con .danlisty').each(function(){
                    var inputText = $(this).val();
                    //先判断左边的pText是否为科技儿童房
                    if(inputText == '科技儿童房'){
                        //得到它下一个子节点的value，也就是右边的input
                        var a = $(this).next().attr("value");
                        //用当前p的文本进行比较，如果相同说明是这个input
                        if(a == pText){ 
                        //此时为相同，显示
                        $(this).parent().show();
                        }else{
                        //此时不同
                        $(this).parent().hide();
                            
                        }
                    }        
                });
                break;
 
        default:
        }
        }else{
        $('.wy-Module-con .danlisty2 ').each(function(){
                    
            var inputText = $(this).val();
            //先判断pText是否为全部
            if(pText == '全部'){
                //全部显示
                $(this).parent().show();
            }//用当前p的文本进行比较，如果相同说明是这个input        
            else if(pText == inputText.trim()){
                //此时为相同，显示
                $(this).parent().show();
            }else{
                //此时不同
                $(this).parent().hide();
            }
        });}
    })
  });

----------------------------------