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>
    

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>

不排除导致的错误：

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

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