JavaScript Tutorial/jQuery/each

Материал из Web эксперт
Перейти к: навигация, поиск

Append value with each function

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">

$(document).ready(

 function() {
   var $append = " Marx";
   $(["A", "B", "C", "D"])
     .each(
       function() {
$("ul").append("
  • " + this + $append + "
  • ");
           }
         );
     }
    

    );

       </script>
     </head>
     <body>
    
     </body>
    

    </html></source>


    Each function and array

       <source lang="javascript">
    

    <html>

     <head>
       <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
       <script type="text/javascript">
           $(document).ready(function(){
         var anArray = ["one","two","three",4];
         var anObject = {one:1, two:2, three:3};
         $.each(anArray,function(n,value){
           document.write("["+n+"]="+value);
         });
         $.each(anObject,function(n,value){
           document.write("["+n+"]="+value);
         });
           });
       </script>
     </head>
     <body>
       <body>
    

    Follow me!

       </body>
    

    </html></source>


    Each function and map array

       <source lang="javascript">
    

    <html>

     <head>
       <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
       <script type="text/javascript">
           $(document).ready(function(){
         var anArray = ["one","two","three",4];
         var anObject = {one:1, two:2, three:3};
         $.each(anArray,function(n,value){
           document.write("["+n+"]="+value);
         });
         $.each(anObject,function(n,value){
           document.write("["+n+"]="+value);
         });
           });
       </script>
     </head>
     <body>
       <body>
    

    Follow me!

       </body>
    

    </html></source>


    each function callback

       <source lang="javascript">
    

    <html>

     <head>
       <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
       <script type="text/javascript">
       $(document).ready(function(){
           $("#exampleTable").find("td").each(function(i, el) {
           var inputEl = $(el).children().get(0);
           $(el).before("<td>Added " + $(inputEl).attr("type") + "</td>");
       })
           
       });
       </script>
     </head>
     <body>
        <form>
    
               Type
    
               Element
    
               <input type="button" value="Input Button"/>
    
               <input type="checkbox" />
    
       </form>
    
     </body>
    

    </html></source>


    Each span tag

       <source lang="javascript">
    

    <html>

     <head>
       <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
       <script type="text/javascript">
           $(document).ready(function(){
                $("div").attr("id", function (arr) {
                   return "div-id" + arr;
                }).each(function () {
                   $("span", this).html("(ID="" + this.id + "")");
                });
           });
       </script>
     </head>
     <body>
       <body>
    
    A
     </body>
    

    </html></source>


    For each array element

       <source lang="javascript">
    

    <html>

     <head>
       <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
       <script type="text/javascript">
           $(document).ready(function(){
                 var arr = [ "one", "two", "three", "four", "five" ];
                 jQuery.each(arr, function() {
                      alert(this);
                 });
           });
       </script>
     </head>
     <body>
       <body>
    

       </body>
    

    </html></source>


    For each function with index and value

       <source lang="javascript">
    

    <html>

     <head>
       <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
       <script type="text/javascript">
           $(document).ready(function(){
                 var arr = [ "one", "two", "three", "four", "five" ];
                 jQuery.each(arr, function(i, val) {
                     alert(i+" "+ val);
                 });
           });
       </script>
     </head>
     <body>
       <body>
    

       </body>
    

    </html></source>


    Get each loop index

       <source lang="javascript">
    

    <html>

     <head>
       <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
       <script type="text/javascript">
           $(document).ready(function(){
               $("button").click(function () {
                 $("div").each(function (index, domEle) {
                   if ($(this).is("#stop")) {
                     $("span").text("#" + index);
                     return false;
                   }
                 });
               });
           });
       </script>
     </head>
     <body>
       <body>
           <button>Click</button> 
             
    
    asdf
    asdf
    asdf
    asdf
    Stop here
    asdf
    asdf
    asdf
       </body>
    

    </html></source>


    Hard code value into each function

       <source lang="javascript">
    

    <html>

     <head>
       <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
       <script type="text/javascript">
    

    $(document).ready(

     function() {
       $.each(
         ["A", "B", "C", "D"],
         function() {
    
    $("ul").append("
  • " + this + "
  • ");
         }
       );
     }
    

    );

       </script>
       <style type="text/css">
    

    body {

       font: 16px sans-serif;
    

    }

       </style>
     </head>
     <body>
    
     </body>
    

    </html></source>


    Loop through each tag

       <source lang="javascript">
    

    <html>

     <head>
       <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
       <script type="text/javascript">
           $(document).ready(function(){
                $("*", document.body).each(function () {
                     var parentTag = $(this).parent().get(0).tagName;
                     alert(parentTag);
                     
                });
           });
       </script>
       <style>
         .y { background:yellow; }
     </style>
     </head>
     <body>
       <body>
    
    <button disabled="disabled">First</button>
               
    
     </body>
    

    </html></source>


    Return true as continue statement

       <source lang="javascript">
    

    <html>

     <head>
       <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
       <script type="text/javascript">
    

    $(document).ready(

     function() {
       $(["A", "B", "C", "D"])
         .each(
           function() {
             if (this == "A") {
               return true;
             }
             $("ul").append(
    
    "
  • " + this + "
  • "
             );
           }
         );
     }
    

    );

       </script>
     </head>
     <body>
    
     </body>
    

    </html></source>


    Use each function to add class

       <source lang="javascript">
    

    <html>

     <head>
       <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
       <script type="text/javascript">
    

    $(document).ready(

     function() {
       $("li").each(
         function() {
           $(this).addClass("my");
         }
       );
     }
    

    );

       </script>
       <style type="text/css">
    

    ul {

       list-style: none;
       margin: 5px;
       padding: 0;
    

    } li.my {

       background: #a0cde5;
       border: 4px solid #99c6dd;
    

    }

       </style>
     </head>
     <body>
    
    • A
    • B
    • C
    • D
     </body>
    

    </html></source>


    Use Each Function To loop through Selected Item

       <source lang="javascript">
    

    <html>

     <head>
       <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
       <script type="text/javascript">
           $(document).ready(function(){
         
               $("select").change(function () {
                  var str = "";
                  $("select option:selected").each(function () {
                     str += $(this).text() + " ";
                 });
                 $("div").text(str);
               }).trigger("change");
           });
       </script>
     </head>
     <body>
       <select name="A" multiple="multiple">
           <option>A</option>
           <option selected="selected">B</option>
           <option>C</option>
       </select>
    
     </body>
    

    </html></source>


    Use foreach to create li

       <source lang="javascript">
    

    <html>

     <head>
       <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
       <script type="text/javascript">
    

    $(document).ready(

     function() {
       var $items = [
         "C",
         "B",
         "V",
         "R"
       ];
       $($items).each(
         function() {
    
    $("ul").append("
  • " + this + "
  • ");
         }
       );
     }
    

    );

       </script>
     </head>
     <body>
    
     </body>
    

    </html></source>


    Use "return" to break out of each() loops early.

       <source lang="javascript">
    

    <html>

     <head>
       <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
       <script type="text/javascript">
           $(document).ready(function(){
               $("button").click(function () {
                 $("div").each(function (index, domEle) {
                   $(domEle).css("backgroundColor", "yellow"); 
                   if ($(this).is("#stop")) {
                     return false;
                   }
                 });
               });
           });
       </script>
     </head>
     <body>
       <body>
           <button>Change colors</button> 
             
    
    asdf
    asdf
    asdf
    asdf
    Stop here
    asdf
    asdf
    asdf
       </body>
    

    </html></source>