基于jQuery的遍歷同id元素 并響應(yīng)事件的代碼
更新時(shí)間：2012年06月14日 22:53:02 作者：
寫網(wǎng)頁的時(shí)候，腳本循環(huán)的時(shí)候有很多時(shí)候都會(huì)循環(huán)出來同id的網(wǎng)頁元素，下面貼出來代碼，如何利用jQuery對這些元素進(jìn)行逐一遍歷并可響應(yīng)消息
完整測試代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery遍歷同id元素，并響應(yīng)消息</title>
<script language="javascript" src="http://demo.jb51.net/jslib/jquery/jquery-1.7.2.min.js"></script>
<script language="javascript">
$(document).ready(function(){
$("[id=test]").each(function(){
$(this).click(function(){
$(this).val('被單擊');
alert('觸發(fā)了單擊消息!');
});
});
});
</script>
</head>
<body>
<label for="test"></label>
<input type="text" name="test" id="test" />
<br /><br />
<label for="test"></label>
<input type="text" name="test" id="test" />
</body>
</html>
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery遍歷同id元素，并響應(yīng)消息</title>
<script language="javascript" src="http://demo.jb51.net/jslib/jquery/jquery-1.7.2.min.js"></script>
<script language="javascript">
$(document).ready(function(){
$("[id=test]").each(function(){
$(this).click(function(){
$(this).val('被單擊');
alert('觸發(fā)了單擊消息!');
});
});
});
</script>
</head>
<body>
<label for="test"></label>
<input type="text" name="test" id="test" />
<br /><br />
<label for="test"></label>
<input type="text" name="test" id="test" />
</body>
</html>
您可能感興趣的文章:
- jQuery遍歷DOM的父級(jí)元素、子級(jí)元素和同級(jí)元素的方法總結(jié)
- jQuery遍歷DOM元素與節(jié)點(diǎn)方法詳解
- JQuery 兩種方法解決剛創(chuàng)建的元素遍歷不到的問題
- JQuery中使用.each()遍歷元素學(xué)習(xí)筆記
- jQuery基于當(dāng)前元素進(jìn)行下一步的遍歷
- jquery遍歷select元素(實(shí)例講解)
- JS Jquery 遍歷,篩選頁面元素 自動(dòng)完成(實(shí)現(xiàn)代碼)
- jQuery遍歷DOM節(jié)點(diǎn)操作之filter()方法詳解
- jQuery向上遍歷DOM樹之parents(),parent(),closest()之間的區(qū)別
- 舉例講解jQuery對DOM元素的向上遍歷、向下遍歷和水平遍歷
相關(guān)文章
下拉和收縮類似的效果應(yīng)用非常的頻繁，這篇文章主要介紹了jquery實(shí)現(xiàn)的下拉和收縮效果,需要的朋友可以參考下2014-08-08
jQuery 操作option的實(shí)現(xiàn)代碼
js清空option之前清空option ，我的做法是遍歷現(xiàn)有option，將其每個(gè)子元素都置空即可。2011-03-03
jQuery插件HighCharts實(shí)現(xiàn)的2D對數(shù)餅圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts實(shí)現(xiàn)的2D對數(shù)餅圖效果,結(jié)合實(shí)例形式分析了jQuery圖形插件HighCharts繪制2D對數(shù)餅圖的具體實(shí)現(xiàn)步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
這個(gè)方法把a(bǔ)jax方法封裝一下，方便調(diào)用2008-11-11
本文給大家講述的是如何使用jspdf生成pdf報(bào)表的方法和示例，十分的實(shí)用，有需要的小伙伴可以參考下。2015-07-07
何為頁面 Mask (遮罩)？看過 jQuery 的 Lightbox 插件的一定不會(huì)陌生。就是在頁面上建一個(gè)透明層遮蓋住頁面的全部內(nèi)部。2010-01-01
jQuery 獲取select選中值及清除選中狀態(tài)
這篇文章主要介紹了jQuery 獲取select選中值及清除選中狀態(tài)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-12-12
本文主要介紹了使用jQuery快速高效制作網(wǎng)頁交互特效的方法，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
BootStrap和jQuery相結(jié)合實(shí)現(xiàn)可編輯表格
這篇文章主要介紹了BootStrap和jQuery相結(jié)合實(shí)現(xiàn)可編輯表格的相關(guān)資料,需要的朋友可以參考下2016-04-04
淺談ajax在jquery中的請求和servlet中的響應(yīng)
下面小編就為大家分享一篇淺談ajax在jquery中的請求和servlet中的響應(yīng)，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01