jquery刪除前n個li元素程式碼例項
如果要刪除某一個指定的li元素可以參閱jquery刪除指定li元素簡單介紹一章節。
下面分享一段程式碼例項,它實現了刪除前n個li元素的功能。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> ul li{ list-style:none; font-size:12px; line-height:25px; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type='text/javascript'> $(document).ready(function(){ $("#bt").click(function(){ for (var count = 0; count < 3; count++) { $("li").eq(0).remove(); } }) }) </script> </head> <body> <ul id="box"> <li>螞蟻部落歡迎您,只有努力奮鬥才會有美好的明天。</li> <li>沒有人一開始就是高手,必須要通過虛心學習。</li> <li>每一天都是新的,要好好珍惜。</li> <li>只有當下的時間才是真實的,下一秒都是虛幻的。</li> <li>分享的精神和互助的胸懷是進步的最大源動力。</li> </ul> <input type="button" id="bt" value="檢視效果"/> </body> </html>
上面的程式碼實現了我們的要求,能夠刪除li元素列表中的前三個元素。
可能有朋友會有這樣的疑問,為什麼不採用如下程式碼:
[JavaScript] 純文字檢視 複製程式碼for (var count = 0; count < 3; count++) { $("li").eq(count).remove(); }
這是因為每一次執行remove()方法,$("li")獲取的元素數目都會發生變化,比如第一次執行remove()之後,li元素列表變為:
[HTML] 純文字檢視 複製程式碼<li>沒有人一開始就是高手,必須要通過虛心學習。</li> <li>每一天都是新的,要好好珍惜。</li> <li>只有當下的時間才是真實的,下一秒都是虛幻的。</li> <li>分享的精神和互助的胸懷是進步的最大源動力。</li>
當第二次執行的時候,count變成1,那麼刪除的就不是"<li>沒有人一開始就是高手,必須要通過虛心學習。</li>"這個li元素了,而是"<li>每一天都是新的,要好好珍惜。</li>"這個li元素,所以就會導致錯誤。
$("li")內部其實是使用的getElementsByTagName()方法實現的,此方法獲取元素是實時動態的,具體可以參閱getElementsByTagName()獲取元素是動態的一章節。
相關文章
- jquery如何獲取li元素的前n個程式碼例項jQuery
- js刪除li元素程式碼例項JS
- jQuery 刪除當前li元素jQuery
- 用jQuery獲取指定前幾個li元素程式碼例項jQuery
- js刪除指定的li元素程式碼例項JS
- css匹配第n個li元素程式碼例項CSS
- jquery刪除指定元素程式碼例項jQuery
- jquery刪除指定子元素程式碼例項jQuery
- 使用jQuery刪除一個元素節點程式碼例項jQuery
- jquery動態新增li元素程式碼例項jQuery
- jQuery刪除指定li元素jQuery
- jQuery獲取指定的li元素程式碼例項jQuery
- jQuery調整li元素順序程式碼例項jQuery
- jQuery獲取所有的li元素程式碼例項jQuery
- jQuery實現的刪除指定子元素程式碼例項jQuery
- jQuery新增和刪除元素class屬性例項程式碼jQuery
- jQuery實現的獲取m到n之間的li元素程式碼例項jQuery
- jQuery獲取當前元素上一個兄弟元素例項程式碼jQuery
- jQuery查詢第n個li元素jQuery
- jquery獲取指定li元素後面的第n個li元素jQuery
- jQuery刪除具有指定文字的li元素jQuery
- javascript刪除指定子元素程式碼例項JavaScript
- JavaScript刪除元素節點程式碼例項JavaScript
- jQuery刪除html標籤程式碼例項jQueryHTML
- jQuery刪除表格指定行程式碼例項jQuery行程
- jquery增加和刪除行程式碼例項jQuery行程
- CSS匹配第一個li元素程式碼例項CSS
- css匹配最後一個li元素程式碼例項CSS
- jQuery獲取當前元素的上一個或者下一個元素程式碼例項jQuery
- CSS 設定前n個li元素樣式CSS
- 獲取指定元素下所有li元素程式碼例項
- css匹配第n個子元素程式碼例項CSS
- css匹配指定行li元素程式碼例項CSS
- removeChild()刪除li元素REM
- jquery實現的獲取當前元素的上一個元素程式碼例項jQuery
- jQuery獲取當前元素的上一級元素程式碼例項jQuery
- javascript刪除陣列重複元素程式碼例項JavaScript陣列
- 刪除陣列中的指定元素例項程式碼陣列