[jQuery] CSS套用奇偶行數

2010-11-22

10697
0
CSS

[jQuery] CSS套用積偶行數

其實這是還蠻常見的東西，只是記錄一下，

雖然.Net的很多工具都有此功能，就是奇數行和偶數行的顏色會不同，

可是有時候還是會有要用自行設定的時候，

之前在做一些再做一些界面的時候懶得寫程式去置換(也沒去想要寫)，

前陣子美術問我說有沒有辦法讓程式自動去判斷DOM的奇偶行數，自動加上class，

這樣才不用每次加一行東西就要自己再加class，想想也對，有時候我自己加class也是挺煩的事情，

但是用jQuery就可以輕鬆辦到，應該很多人都會用拉，所以我單純的提供我的方法，

以下是我的HTML，紅色class的部分是本來應該要加上class的地方，但實際是沒有加上去的：

<div aling="left" class="main_content">
    <ul>
            <li class="odd1" >
                <label>1：</label>
            </li>
            <li class="odd2" >
                <asp:TextBox ID="TextBox1" runat="server" Width="300px" Text="0"></asp:TextBox>
            </li>
        </ul>
        <ul>
            <li class="even1" >
                <label>2：</label>
            </li>
            <li class="even2" >
                <asp:TextBox ID="TextBox2" runat="server" Width="300px" Text="0"></asp:TextBox>
            </li class="even2" >
        </ul>

<ul>
    <li class="odd1" >
      <label>3：</label>
    </li>
    <li class="odd2" >
       <asp:TextBox ID="TextBox3" runat="server" Width="300px" Text="0"></asp:TextBox>
    </li>

</ul>

        <ul>
            <li class="send">
                <asp:Button ID="btnSubmit" runat="server" Text="新增" ValidationGroup="send" />
                <asp:Button ID="btnCancel" runat="server" Text="取消" />
            </li>
        </ul>
    </div>

我希望我的畫面可以是如下圖(加上紅色class就會如下圖)

可是事事總不如人意我又什麼都沒做，怎可能如此，真正的畫面應該是如下圖

所以我寫了一個jQuery針對這個DOM來加上Class

<script language="javascript" type="text/javascript">
    $().ready(function () {
        $("div.main_content ul:even").children("li:even").addClass("odd1");
        $("div.main_content ul:even").children("li:odd").addClass("odd2");
        $("div.main_content ul:odd").children("li:even").addClass("even1");
        $("div.main_content ul:odd").children("li:nth-child(even)").addClass("even2");
    });
</script>

其實是個很簡單的程式，主要就是先抓出class為main_content的div下面的ul，

為什麼要加上.children()，只是比較好辨識，不然全部糊在一起，

比較特別的地方是:odd和:even的應用，

因為jQuery的列數是從0算起，所以我們所認為的第1列，其實是他的第0列，

而0就是偶數(even)，不是奇數(odd)，所以如果要確實的加上奇偶數的class，

要把:odd和:even的Selectors順序反過來寫，但有另外一種狀況是例外的，

就是使用 nth-child(index) ，他的index除了可以數字外，還可以使用奇偶數，

對它來說第一行就是1，也就是奇數，所以odd和even就不用反過來寫，

一定會有些疑問的地方，比如說每個<ul>裡面會有兩個<li>，

為什麼不是.children(li:eq(0))和.children(li:eq(1))，這樣是沒有錯，的確可以顯示，

但只會有前兩個<ul>會正常顯示，其他的<ul>裡面的<li>會套不到class，

因為他是抓出包裹元素所以當你是 $("div.main_content ul:even").children("li:eq(0)").addClass("odd1"); 時，

他只會針對第一個ul的第一個<li>加上class，其他的<ul>裡面的<li>並不會加上class，

jQuery用好後，無論你增加幾個<ul>，程式都自動幫你套上class，再也不用自己去一個一個加，感謝jQuery的德政

END…

回首頁