提供裝潢工程相關案件，線上超過上百筆精選裝潢案件
都能在這找到屬於自己的合適案件，找裝潢工程機會		鐘點打掃想要搬家，讓專業的來，細心運送大小家具
免費估價專業包裝，輕鬆遷移免煩惱

首頁  •  j2h 論壇 • 程式設計討論     • 

[JQuery] each() Examples

房東：泰泰
發表時間：2012-02-06


Firstly, what is jQuery .each()


Basically, the jQuery .each() function is used to loop through each element of the target jQuery object. Very useful for multi element DOM manipulation, looping arrays and object properties.






jQuery .each() Syntax












1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

//DOM ELEMENTS

$("div").each(function(index, value) {

    console.log('div' + index + ':' + $(this).attr('id'));

});

//outputs the ids of every div on the web page

//ie - div1:header, div2:body, div3:footer

  

//ARRAYS

var arr = [ "one", "two", "three", "four", "five" ];

jQuery.each(arr, function(index, value) {

       console.log(this);

       return (this != "three"); // will stop running after "three"

   });

//outputs: one two three

  

//OBJECTS

var obj = { one:1, two:2, three:3, four:4, five:5 };

    jQuery.each(obj, function(i, val) {

       console.log(val);

    });

//outputs: 1 2 3 4 5



For a more advanced jQuery.each example see Create Text Excerpts for Paragraphs on your web page.


1. Basic jQuery.each() Function Example












1

2

3

4

5

6

7

8

9

10

11

12

13

$('a').each(function(index, value){

      console.log($(this).attr('href'));

});

//outputs: every links href element on your web page

  

$('a').each(function(index, value){

    var ihref = $(this).attr('href');

    if (ihref.indexOf("http") >= 0)

    {

        console.log(ihref+'<br/>');

    }

});

//outputs: every external href on your web page



eg – if you had the following links anywhere on your web page:












1

2

3

<a href="http://www.jquery4u.com">JQUERY4U</a>

<a href="http://www.phpscripts4u.com">PHP4U</a>

<a href="http://www.blogoola.com">BLOGOOLA</a>



It would output:












1

2

3

http://jquery4u.com

http://www.phpscripts4u.com

http://www.blogoola.com



2. jQuery.each() Array Example












1

2

3

4

5

var numberArray = [0,1,2,3,4,5];

jQuery.each(numberArray , function(index, value){

     console.log(index + ':' + value);

});

//outputs: 1:1 2:2 3:3 4:4 5:5



3. jQuery.each() JSON Example












1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

(function($) {

var json = [

    { "red": "#f00" },

    { "green": "#0f0" },

    { "blue": "#00f" }

];

  

$.each(json, function() {

  $.each(this, function(name, value) {

    /// do stuff

    console.log(name + '=' + value);

  });

});

//outputs: red=#f00 green=#0f0 blue=#00f

})(jQuery);



Also see 10 Example JSON Files.


4. jQuery.each() Class Example


This example shows you how to loop through each element with class=”productDescription” given in the HTML below.












1

2

3

<div class="productDescription">Red</div>

<div class="productDescription">Orange</div>

<div class="productDescription">Green</div>













1

2

3

4

$.each($('.productDescription'), function(index, value) {

    console.log(index + ':' + value);

});

//outputs: 1:Red 2:Orange 3:Green



You don’t have to include index and value these are just parameters which help determine which DOM element your currently iterating. You could also write it like this:












1

2

3

4

$.each($('.productDescription'), function() {

    console.log($(this).html());

});

//outputs: Red Orange Green






5. jQuery.each() Delay Example


Click to see it in action

This is awesome! Look up at the menu at the top as this contains the first list items on the page!.












1

2

3

4

5

jQuery('li').each(function(i){

  jQuery(this).delay(i*1500).fadeOut(1500,function(){

      jQuery(this).css("background-color","orange");

     });

});



Conclusion


Make use of the .each function as much as you can because it’s fast and will save you heaps of time!


Remember: $.each() and $(selector).each() are two different methods defined in two different ways, one with jQuery.each = function and the other with jquery.fn.each = function.


Note: the console.log() commands are just for use with firebug.


 


 


http://www.jquery4u.com/jquery-functions/jquery-each-examples/


  • 贊助網站       

    廣利不動產-新板特區指名度最高、值得您信賴的好房仲
    您的托付,廣利用心為您服務
    廣利不動產-板橋在地生根最實在--新板特區指名度最高、值得您信賴的好房仲
    完整房訊，房屋、店面熱門精選物件，廣利不動產 優質仲介，房屋租賃、買賣資訊透明，交易真安心！


    • 　共 0 人回應

    姓名：
    佈告內容：
    其他選項: