Jqeach and jqeach

Jqeach and jqeach

1. You can use each to traverse li to obtain all li content.

<! -- 1 --> <ul class = "one"> <li> 11a </li> <li> 22b </li> <li> 33c </li> <li> 44d </li> <li> 55e </li> </ul> <button> output each li value </button> <script> // one way to traverse li through each get all li content $ ("button "). click (function () {$ (". one> li "). each (function () {// print all contents of li console. log ($ (this ). text () ;})}); </script>

2. Traverse li through each and add events to each li through $ (this ).

<! -- 2 types --> <ul class = "two"> <li> 2222 </li> <li> 22b </li> <li> 3333 </li> <li> 44d </li> <li> 5555 </li> </ul> <script> // use each to traverse li through $ (this) add an event $ ('. two> li '). each (function (index) {console. log (index + ":" + $ (this ). text (); // Add a click point to each li to change the color $ (this ). click (function () {alert ($ (this ). text (); then (this).css ("background", "# fe4365") ;}) ;}</script>

4. traverse all li resources and add class names to all li resources.

<! -- 4 types --> <ul class = "ctn3"> <li> Eat </li> <li> Sleep </li> </ ul> <span> click 3 </span> <script> // you can use four methods to traverse all li resources and add class names to all li resources $ ('span '). click (function () {$ ('. ctn3> li '). each (function () {$ (this ). toggleClass ('example ') ;}}); </script>

Five types of element == (this) in the each () loop)

<! DOCTYPE html>