jQuery改变兄弟元素样式，及:not([class="allclassname"])筛选小结

以前一直对于jquery感到很畏惧，最近做点击图表变色，将其他元素图片复位的小需求，总结了一下一点小心得。

主要两点是：1、将所有兄弟元素的样式设置为一样，对于子元素的遍历；

　　　　　　2、对于特殊不需要变化的兄弟元素的排除；

如下，对所有兄弟元素的样式设置为一样用过有两种方法：

 <div class="paneltime">
                         <ul >
                             <li><a>今天</a></li>
                             <li><a>3天</a></li>
                             <li class="active"><a>7天</a></li>
                             <li><a>15天</a></li>
                             <li><a>30天</a></li>
                             <li>时间段：</li>
                             <li style="margin-left:200px;" ordertype="desc"><a>声量  <i class="icon-chevron-down"></i></a></li>
                             <li  ordertype="desc"><a>时间  <i class="icon-chevron-down"></i></a></li>
                             <li ordertype="desc"><a>相关度  <i class="icon-chevron-down"></i></a></li>
                             <li class="pull-right">
                                 <div class="panel-search bgwhite" id="panel-search">
                                     <form class="form-search">
                                         <span class="input-icon">
                                             <input type="text" placeholder="搜索 ..." class="panel-search-input" id="panel-search-input" autocomplete="off" />
                                             <i class="icon-search nav-search-icon"></i>
                                         </span>
                                     </form>
                                 </div>
                             </li>
                         </ul>

                     </div>
     

html部分代码

1.1、遍历子元素：

$(".paneltime li").click(function(){

　　var liParent = $(this).parent();
　　var brother = liParent.children();

　　var orderType = $(this).attr('orderType');

　　　　brother.each(function(index){
　　　　　$(this).removeClass('active');
　　　　})
　　　　$(this).addClass('active');

});

1.2、后来发现不需要遍历的：

brother.removeClass('active');
$(this).addClass('active');

2.排除最后的那个搜索图标<i class="icon-search nav-search-icon"></i>，不需要变化，不排除就会变为箭头

brother.find('i:not([class="icon-search nav-search-icon"])').attr('class','icon-chevron-down')
$(this).find('i:not([class="icon-search nav-search-icon"])').attr('class','icon-chevron-up red');

 <script type="text/javascript">
  //更改当前标签的背景色

     $(".paneltime li").click(function(){

             var liParent = $(this).parent();
             var brother = liParent.children();

             var orderType = $(this).attr('orderType');
             if(orderType=="desc")
             {
                 brother.each(function(index){
                     $(this).removeClass('active');
                 })
                 $(this).addClass('active');
                 $(this).attr('orderType','asc');
                 brother.find('i:not([class="icon-search nav-search-icon"])').attr('class','icon-chevron-down')
                 $(this).find('i:not([class="icon-search nav-search-icon"])').attr('class','icon-chevron-up red');
             }
             else if(orderType=="asc")
             {
                 brother.each(function(index){
                     $(this).removeClass('active');
                 })
                 $(this).addClass('active');
                 $(this).attr('orderType','desc');
                 brother.find('i:not([class="icon-search nav-search-icon"])').attr('class','icon-chevron-down');
                 $(this).find('i:not([class="icon-search nav-search-icon"])').attr('class','icon-chevron-down red');
             }
             else
             {
                 brother.removeClass('active');
                 $(this).addClass('active');
             }
         });
 </script>

js部分代码

不排除导致的错误：

排除后搜索按钮不会变化：

-----------------------------------------------------------------------------------------------------------------------------------151102---