CODEWITHSUNDEEP
jquery
Leahcim
Leahcim

Reputation: 41919

jQuery: each function

In this codecademy.com exercise, I'm supposed to use the each function to iterate over the jQuery variable, adding every key to the list with id jQueryAttributes. I wrote the each function below, but it's not correct. I'm unsure how to add it to the id with jQueryAttributes. Html is below

var jQuery = $;

//iterate over jQuery, adding every key
//to the list with id jQueryAttributes
$.each(jQuery, function(index, value){      
$('#'+index).append($('<li></li>').html(value));
});

html

<div id="left">
<h1>$ methods and attributes</h1>
<ul id='jQueryAttributes'>
</ul>
</div>

Update

One thing I forgot to mention. I'm supposed to use the index of the function to assign a different id to each list item.

Upvotes: 0

Views: 624

Answers (4)

CoolStraw
CoolStraw

Reputation: 5390

$('#jQueryAttributes').append($('<li></li>').html(value));

If you want to assign a different index for each item you have to format it accordingly using the index you get in return from .each:

$('#jQueryAttributes').append($('<li id="id_'+ index +'"></li>').html(value));

Upvotes: 0

flergl
flergl

Reputation: 245

From what I can see, you are running into two problems. The first is that you are trying to use

$('#'+index)

to connect to an element that hasn't yet been added to the DOM. You can assign the ids by doing what CoolStraw suggested, with the addition of

.attr('id',index)

at the end to set the ID of the element being inserted.

The second problem is that you're attempting to insert the values of the jQuery object as strings without casting them. When I poked around at this, only the non-function and non-object values ended up in the results. So instead of

jQuery('<li></li>').html(value)

use

jQuery('<li></li>').html(''+value)

or

jQuery('<li>'+value+'</li>')

So either of these would work:

$.each(jQuery,function(index,value){ $('#jQueryAttributes').append(jQuery('<li></li>').html('' + value).attr('id',index)); });

Building the element as a string before creating it with jQuery:

$.each(jQuery,function(index,value){ jQuery('#jQueryAttributes').append(jQuery('<li id="' + index + '">' + value +' </li>')); });

Upvotes: 1

VDP
VDP

Reputation: 6420

I guess you need just this:

$.each($, function(index, value){      
    $('#jQueryAttributes').append($('<li></li>').html(index));
});​

fiddle

The value is the actual function so you need the index

Upvotes: 2

Ramesh Kotha
Ramesh Kotha

Reputation: 8322

from the jquery docs http://api.jquery.com/each/

The .each() method is designed to make DOM looping constructs concise and less error-prone. When called it iterates over the DOM elements that are part of the jQuery object. Each time the callback runs, it is passed the current loop iteration, beginning from 0. More importantly, the callback is fired in the context of the current DOM element, so the keyword this refers to the element.

Suppose we had a simple unordered list on the page:

<ul>
    <li>foo</li>
    <li>bar</li>
</ul>

We can select the list items and iterate across them:

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

A message is thus alerted for each item in the list:

0: foo 1: bar

We can stop the loop from within the callback function by returning false.

Upvotes: 0

Related Questions