jQuery是一組JavaScript庫,它可以大幅簡化HTML文檔的遍歷,事件處理,動畫、AJAX交互等操作。其中,遍歷循環點擊事件也是jquery中非常實用的一個功能。
$(function(){ $("li").each(function(index){ $(this).click(function(){ alert("選擇的是第"+(index+1)+"個li元素"); }); }); });
上述代碼中,首先我們要使用jQuery中的$(function(){});來確保代碼在HTML文檔完全加載以后才執行,這是一個非常好的習慣。接著,我們使用$("li")來獲取HTML中所有的li元素,然后使用each()方法對每個li元素進行遍歷操作。每當遍歷到一個li元素時,我們設定了點擊事件click(),在點擊時會彈出一個提示框,顯示這個li元素的序號。
需要說明的是,index是從0開始計算的,所以我們在alert中加上1,顯式地表示這個li元素是第幾個。
如果你想要對指定的某些li元素進行操作,那么可以采用類似下面的篩選方式:
$(function(){ $("li:even").each(function(index){ $(this).click(function(){ alert("選擇的是li序號為偶數的元素"); }); }); });
上述代碼中,我們通過jQuery中的篩選器:even選出了HTML中序號為偶數的li元素。你可以嘗試把:even改成:odd來看看會發生什么。