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---