jQuery: each function

Question

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.

@JosephSilber I'm not sure, i think that assigns all methods and attributes of $ to jQuery — Leahcim
– Leahcim, Commented Sep 7, 2012 at 15:16

VDP · Accepted Answer · 2012-09-07 15:21:56Z

2

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

answered Sep 7, 2012 at 15:21

VDP

6,4104 gold badges33 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

flergl · Accepted Answer · 2012-09-07 15:47:11Z

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>')); });

CoolStraw · Accepted Answer · 2012-09-10 07:46:12Z

0

$('#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));

edited Sep 10, 2012 at 7:46

answered Sep 7, 2012 at 15:13

CoolStraw

5,4008 gold badges44 silver badges66 bronze badges

1 Comment

Leahcim Over a year ago

I tried that. Didn't work. One thing I forgot to mention- I'm supposed to use the 'index' from the function to assign an a different id to each item.

Ramesh Kotha · Accepted Answer · 2012-09-07 15:15:31Z

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.

Collectives™ on Stack Overflow

jQuery: each function

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related