ホームページ >ウェブフロントエンド >jsチュートリアル >jqueryの各トラバーサルイベント、クラス、ループのサンプルコードを詳しく解説
各 li をトラバースして、すべての li の内容を取得します
<!-- 1种 --> <ul class="one"> <li>11a</li> <li>22b</li> <li>33c</li> <li>44d</li> <li>55e</li> </ul> <button>输出每个li值</button> <script> // 1种 通过each遍历li 可以获得所有li的内容 $("button").click(function(){ $(".one > li").each(function(){ // 打印出所有li的内容 console.log($(this).text()); }) }); </script>
li をそれぞれトラバースし、$(this) を通じて各 li にイベントを追加します
<!-- 2种 --> <ul class="two"> <li>2222</li> <li>22b</li> <li>3333</li> <li>44d</li> <li>5555</li> </ul> <script> // 2种 通过each遍历li 通过$(this)给每个li加事件 $('.two > li').each(function(index) { console.log(index +":" + $(this).text()); // 给每个li加click 点那个就变颜色 $(this).click(function(){ alert($(this).text()); $(this).css("background","#fe4365"); }); }); </script>
すべての li をトラバース すべてに追加li class クラス名
<!-- 4种 --> <ul class="ctn3"> <li>Eat</li> <li>Sleep</li> <li>3种</li> </ul> <span>点击3</span> <script> // 4种 遍历所有li 给所有li添加 class类名 $('span').click(function(){ $('.ctn3 > li').each(function(){ $(this).toggleClass('example'); }) }); </script>
in each() ループ要素 == $(this)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>each练习2</title> <style> p { width: 40px; height: 40px; margin: 5px; float: left; border: 2px blue solid; text-align: center; } span { width: 40px; height: 40px; color: red; } </style> </head> <body> <p></p> <p></p> <p></p> <p id="stop">Stop here</p> <p></p> <p></p> <button>Change colors</button> <span></span> </body> <script src="jquery-1.11.1.min.js"></script> <script > // 在each()循环里 element == $(this) $('button').click(function(){ $('p').each(function(index,element){ //element == this; $(element).css("background","yellow"); if( $(this).is("#stop")){ $('span').text("index :" + index); return false; } }) }) </script> </html>
以上がjqueryの各トラバーサルイベント、クラス、ループのサンプルコードを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。