基于jQuery的遍歷同id元素 并響應(yīng)事件的代碼
更新時(shí)間：2012年06月14日 22:53:02 作者：
寫網(wǎng)頁(yè)的時(shí)候，腳本循環(huán)的時(shí)候有很多時(shí)候都會(huì)循環(huán)出來(lái)同id的網(wǎng)頁(yè)元素，下面貼出來(lái)代碼，如何利用jQuery對(duì)這些元素進(jìn)行逐一遍歷并可響應(yīng)消息
完整測(cè)試代碼：
<!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 遍歷,篩選頁(yè)面元素 自動(dòng)完成(實(shí)現(xiàn)代碼)
- jQuery遍歷DOM節(jié)點(diǎn)操作之filter()方法詳解
- jQuery向上遍歷DOM樹之parents(),parent(),closest()之間的區(qū)別
- 舉例講解jQuery對(duì)DOM元素的向上遍歷、向下遍歷和水平遍歷
相關(guān)文章
下面小編就為大家?guī)?lái)一篇淺析jquery unbind()方法移除元素綁定的事件。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
如何從jQuery的ajax請(qǐng)求中刪除X-Requested-With
X-Requested-With常用于判斷是不是ajax請(qǐng)求，ajax請(qǐng)求中刪除X-Requested-With的方法如下，感興趣的朋友可以參考下2013-12-12
下面小編就為大家分享一篇JQuery選中select組件被選中的值方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
刪除HTML元素可以使用remove及empty，下面有關(guān)這兩個(gè)方法的使用將以示例的方式為大家介紹下2014-08-08
jQuery validate 驗(yàn)證radio實(shí)例
這篇文章主要介紹了jQuery validate 驗(yàn)證radio實(shí)例代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
jQuery增加了并擴(kuò)展了基本的事件處理機(jī)制，不但提供了更加優(yōu)雅的事件處理語(yǔ)法，而且極大地增強(qiáng)了事件處理能力。本文將對(duì)此進(jìn)行詳細(xì)介紹，需要的朋友一起來(lái)看下吧2016-12-12
基于jquery插件編寫countdown計(jì)時(shí)器
這篇文章主要為大家詳細(xì)介紹了jquery插件編寫countdown計(jì)時(shí)器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-06
jQuery簡(jiǎn)易時(shí)光軸實(shí)現(xiàn)方法示例
這篇文章主要介紹了jQuery簡(jiǎn)易時(shí)光軸實(shí)現(xiàn)方法,可實(shí)現(xiàn)點(diǎn)擊底部鏈接動(dòng)態(tài)加載內(nèi)容的功能,涉及jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素屬性的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-03-03
用jQuery簡(jiǎn)化Ajax開發(fā)實(shí)現(xiàn)方法
使用 jQuery 將使 Ajax 變得及其簡(jiǎn)單。jQuery 提供有一些函數(shù)，可以使簡(jiǎn)單的工作變得更加簡(jiǎn)單，復(fù)雜的工作變得不再?gòu)?fù)雜。2010-04-04
Jquery+ajax+JAVA(servlet)實(shí)現(xiàn)下拉菜單異步取值
這篇文章主要介紹了Jquery+ajax+JAVA(servlet)實(shí)現(xiàn)下拉菜單異步取值的相關(guān)資料,需要的朋友可以參考下2016-03-03