Cara Menggunakan Each Function Dalam JQuery ~ Nyintak

Kali ini saya akan menjelaskan cara menggunakan JQuery each function. JQuery each function digunakan untuk memberi fungsi dari sebuah elemen dan diulang sejumlah elemen tersebut hingga semua elemen mempunyai fungsi.

Syntax yang digunakan

Untuk mencari index dan elemen yang sedang dieksekusi

$('li').each(function(index, element){
alert(index, + ' : ' + $(element).text());
});

Catatan : index dan isi dari sebuah elemen itu sendiri akan dikirim ke anonymous function tepat setelah each function dijalankan/dieksekusi.

Untuk mencari elemen saja, dapat menggunakan syntax dibawah ini

$('li').each(function(){
alert($(this).text())
});

Untuk stop dari each function dapat menggunakan return false;

$('li').each(function(){
if($(this).text() == "Thailand"){
return false; }
});

Menggunakan each function dengan mengetahui index dan elemen yang sedang dijalankan

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
           $('#btnSubmit').click(function(){
               $('li').each(function(index, element){
                   alert(index + " : " + $(element).text());
               });
           });
        });
        </script>
    </head>
    <body>
     <ul>
     <li>Indonesian</li>
     <li>Malaysian</li>
     <li>Singapore</li>
     <li>Thailand</li>
     <li>Myanmar</li>
     <li>Brunei Darussalam</li>
     </ul>
     <input type="button" id="btnSubmit" value="Execute"/>
    </body>
</html>

Menggunakan each function dengan mengetahui elemen yang sedang dijalankan

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
           $('#btnSubmit').click(function(){
               $('li').each(function(){
                   alert($(this).text());
               });
           });
        });
        </script>
    </head>
    <body>
     <ul>
     <li>Indonesian</li>
     <li>Malaysian</li>
     <li>Singapore</li>
     <li>Thailand</li>
     <li>Myanmar</li>
     <li>Brunei Darussalam</li>
     </ul>
     <input type="button" id="btnSubmit" value="Execute" /> 
    </body>
</html>

Cara stop dalam each function

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $('#btnSubmit').click(function(){
                $('li').each(function(){
                    if($(this).text() == "Thailand"){
                        return false;
                     }
                    alert($(this).text());
                });
             });
        });
        </script>
    </head>
    <body>
     <ul>
     <li>Indonesian</li>
     <li>Malaysian</li>
     <li>Singapore</li>
     <li>Thailand</li>
     <li>Myanmar</li>
     <li>Brunei Darussalam</li>
     </ul>
     <input type="button" id="btnSubmit" value="Execute" /> 
    </body>
</html>

Performa dalam menggunakan JQuery each function :

JQuery perlu mencari DOM untuk elemen div dengan id = divResult, untuk setiap daftar item dalam list(koleksi). Kinerja dapat ditingkatkan menggunakan "caching divResult elemen".
DOM elemen diperbarui pada setiap perulangan each function. Untuk meningkatkan kinerja bangunlah sebuah variable String dengan data yang dibutuhkan dan kemudian perbaru elemen DOM di luar perulangan. Hal ini memastikan bahwa elemen DOM hanya sekali diperbarui.

Penggunaan Awal

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
     $('#btnSubmit').click(function(){
  $('li').each(function(){
      $('#divResult').html($('#divResult').html() + "<br/>" + $(this).text());
  });
     });
        });
        </script>
    </head>
    <body>
 <ul>
     <li>Indonesian</li>
     <li>Malaysian</li>
     <li>Singapore</li>
     <li>Thailand</li>
     <li>Myanmar</li>
     <li>Brunei Darussalam</li>
 </ul>
 <input type="button" id="btnSubmit" value="Execute" /> <br/>
 <div id="divResult"></div>
    </body>
</html>

Penggunaan yang dapat meningkatkan performa

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script> 
        $(document).ready(function(){
            $('#btnSubmit').click(function(){
                var result = '';
                $('li').each(function(){
                result += "<br/>" + $(this).text();
                });
                $('#divResult').html(result);
            });
        });
        </script>
    </head>
    <body>
     <ul>
     <li>Indonesian</li>
     <li>Malaysian</li>
     <li>Singapore</li>
     <li>Thailand</li>
     <li>Myanmar</li>
     <li>Brunei Darussalam</li>
     </ul>
     <input type="button" id="btnSubmit" value="Execute" /> <br/>
     <div id="divResult"></div>
    </body>
</html>

Nyintak

Nyekrip dari tutorial lengkap dengan penjelasannya

Friday 3 June 2016

Cara Menggunakan Each Function Dalam JQuery

0 comments:

Post a Comment

Kunjungi Juga

Blog Archive

Labels