對于有規律的數據,我們經常需要使用到遍歷來進行處理。在jquery中,我們可以使用each()方法來實現。
//假設我們有以下結構的html <ul id="list"> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> </ul> //如果我們想要遍歷這些li元素并打印出它們的文本內容,可以這樣寫: $('#list li').each(function(){ console.log($(this).text()); });
上面的代碼中,我們首先選中所有的li元素,然后針對每一個li元素,都執行一遍each()中的回調函數。在回調函數中,this關鍵字指向當前的li元素,我們通過$(this)的方式將其轉化為jquery對象,然后就可以訪問它的文本內容,進行打印等操作了。
如果我們有規律的數據,并且需要根據規律去處理數據,也可以使用each()方法。比如,我們有一組表單元素,它們的id都是以“input_”為前綴,并且后面跟著一個數字(從1開始遞增)。如果我們想要將所有input中的值都加上5,可以這樣寫:
<input type="text" id="input_1" /> <input type="text" id="input_2" /> <input type="text" id="input_3" /> <input type="text" id="input_4" /> //遍歷所有input $('[id^="input_"]').each(function(){ var value = parseInt($(this).val()); //獲取當前input的值 $(this).val(value+5); //將值加上5并重新賦值 });
在上面的代碼中,我們使用了jquery的屬性選擇器來選中所有id以“input_”開頭的元素,然后對每個元素執行each()回調函數。在回調函數中,我們首先獲取當前input元素的值,并將其轉化為數字類型。然后將值加上5,并重新賦值給input元素,實現了每個元素都加上5的效果。
上一篇css怎樣使元素居中
下一篇css怎樣把圖片變小