CODEWITHSUNDEEP
jquery
Ragamffn
Ragamffn

Reputation: 319

Array of selectors: for loop vs. $.each

Given the following array of selectors (each of which are display: none in the our css) and for loop:

var arr = ['#home', '#news', '#tidy'];

for (i=0;i<=arr.length;i++){
    $(arr[i]).toggle();
}

What is an equivalent using $.each ( and presumably $(this) )?

Edit

OK I understand using join:

var s = arr.join();
$(s).toggle();

I did not realize that "toggle like many other jQuery methods calls each method internally so there is no need to use each" so +1 to you @undefined, however...

The question was original put forth because even when I:

$.each(arr, function(){
    $(this).text("my id is " + this + ".");
});

I get undefined (!) errors. (OK to be fair there was .toggle and .insertAfter etc., I'm attempting to simplify) Why is the above not equivalent to:

$('#home').text('my id is #home.');
$('#news').text('my id is #news.');
$('#tidy').text('my id is #tidy.');

?

Edit 2

OK it was a syntax issue - $(this) requires a prepending '' +:

$('' + this).text('My id is ' + this + '.')

Is there a rule as to when $(this) requires such treatment?

Upvotes: 2

Views: 255

Answers (4)

Musa
Musa

Reputation: 97672

Try

var arr = ['#home', '#news', '#tidy'];
$(arr.join(',')).toggle();

$(arr.join(',')) => $('#home, #news, #tidy'), which selects all 3 elements then toggle() operates on all the selected elements.

If you do

$.each(arr, function(){
    $(this).text("my id is " + this + ".");
});

the this is actually a string object not a string primitive so what you get in return form $(this) is a jQuery object wrapping a string object not the element that the selector will match. Adding a string primitive '' to a string object gives you a string primitive which is why it works that way.
If you have to use $.each better to use the arguments passed to the callback function, the first argument is the index of the array and the second is the value at the index.

$.each(arr, function(index, value){
    $(value).text("my id is " + this + ".");
});

http://jsfiddle.net/2TPLD/

Upvotes: 6

PSR
PSR

Reputation: 40318

try this

You can use Array join method:

  var arr = ['home', 'news', 'tidy'];

for (i=0;i<=arr.length;i++){
    $('#'+arr[i]).toggle();
}

or

$.each(arr, function() {
 $("#" + this).toggle();
});

or

 var arr = ['#home', '#news', '#tidy'];
 $(arr.join(',')).toggle();

Upvotes: 0

Ram
Ram

Reputation: 144689

You can use Array object's join method:

$(arr.join()).toggle(); // => $('#home, #news, #tidy').toggle();

toggle like many other jQuery methods calls each method internally so there is no need to use each.

Upvotes: 4

शेखर
शेखर

Reputation: 17614

You can use foreach loop as follows

var arr = [ "one", "two", "three", "four", "five" ];
jQuery.each(arr, function() {
    $("#" + this).text("My id is " + this + ".");

});

Or in your case

var arr = ['#home', '#news', '#tidy'];
  jQuery.each(arr, function() {
    $(this).text("My id is " + this + ".");

});

Upvotes: 0

Related Questions