Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript jQuery Basics Working with jQuery Collections The .each() method

Posted by Justin folley
Justin folley
1,227 Points

why it's not working?

$('.favorite-things li').each(function() { // Write code here });

$('li').each(function(){ $(this).prepend($('<input type="checkbox"/>'));
});

index.html 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h2>My Favorite Things</h2>

    <ul class="favorite-things">
        <li>Kittens</li>
        <li>Rainbows</li>
        <li>Unicorns</li>
        <li>Sprinkles</li>
    </ul>

    <script
    src="jquery-3.2.1.min.js"></script>
    <script src="app.js"></script>
</body>
</html>
app.js 
$('.favorite-things li').each(function() {
  // Write code here
});

$('li').each(function(){
$(this).prepend($('<input type="checkbox"/>'));  
});
Adomas Domeika
Adomas Domeika
6,151 Points
Adomas Domeika
Adomas Domeika
6,151 Points

If you add 

<script
      src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

instead of just jquery-3.2.1.min.js

to index.html, which will import jquery 100% and then in app.js, you don't need a selector for input, so my app.js looks like this:

$('.favorite-things li').each(function() {
  // Write code here
});

$('li').each(function(){
  $(this).prepend('<input type="checkbox"/>');  
});

at least for me, it works...

1 Answer

Steven Parker
Steven Parker
231,261 Points
Steven Parker
Steven Parker
231,261 Points

There's nothing obviously wrong here, but as Adomas suggested, the jQuery module itself might not be getting loaded.

To be able to determine things like that for sure, we'd need to see the entire project. To share the whole thing, you can make a snapshot of your workspace and post the link to it here.

Adomas Domeika
Adomas Domeika
6,151 Points
Adomas Domeika
Adomas Domeika
6,151 Points

I think there is a problem in $(this).prepend($('<input type="checkbox"/>');

I am not a pro, but I think that you don't need a selector at prepend method. Because logically, you would try to prepend something to that input, not the input itself.

Wouldn't you agree, Steven?

So the correct solution would be 

$('li').each(function(){
  $(this).prepend('<input type="checkbox"/>');  
});
Steven Parker
Steven Parker
231,261 Points
Steven Parker
Steven Parker
231,261 Points

The "prepend" method will accept an HTML string or a jQuery object, programmer's choice. So Justin's code and yours are both valid solutions.

See the .prepend() documentation page for more details.

Adomas Domeika
Adomas Domeika
6,151 Points
Adomas Domeika
Adomas Domeika
6,151 Points

A quote from the documentation..:

<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>


$( ".container" ).prepend( $( "h2" ) );

If a single element selected this way is inserted into a single location elsewhere in the DOM, it will be moved into the target (not cloned):

<div class="container">
    <h2>Greetings</h2>
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
</div>

And I can see that he doesn't have an input field in his html. But, never mind, not gonna argue, because I already said, I am not a pro ;)

Steven Parker
Steven Parker
231,261 Points
Steven Parker
Steven Parker
231,261 Points

You might not be a pro yet, but understanding the documentation will help you get there!

The jQuery method "$" can take a variety of different kinds of arguments, and does different things depending on what they are. Justin is passing it a string that contains HTML code, which causes it to create a new DOM element(s). This is different from your example where you pass it a CSS-type selector, which causes it to return a collection of matching elements.

Phrases in the above paragraph are links to the relevant parts of the documentation if you'd like more details.