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

Shehan Dissanayake
Shehan Dissanayake
19,119 Points
Posted by Shehan Dissanayake
Shehan Dissanayake
19,119 Points

Inside the jQuery each() method, use prepend() to add an '<input type="checkbox"/>' to the beginning of each list item.

Why is this code wrong?

$('.favorite-things 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() {

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

2 Answers

Clayton Perszyk
MOD
Clayton Perszyk
Treehouse Moderator 48,723 Points
Clayton Perszyk
Clayton Perszyk
Treehouse Moderator 48,723 Points

Hey Shehan,

You're prepending a jQuery object, when you should just be prepending a string.

Yiran Wu
Yiran Wu
2,803 Points

Hey Clayton, I tried either with a string or as a jQuery object, none of them works:

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

or 

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

Can you help me figure out what's the problem here?

Terri Valentine
Terri Valentine
23,034 Points

I apologize but I still don't understand the answer. I'm still stuck on this challenge. Ugh. :-(

Clayton Perszyk
Clayton Perszyk
Treehouse Moderator 48,723 Points
Clayton Perszyk
Clayton Perszyk
Treehouse Moderator 48,723 Points

Hey Yiran,

Your first code snippet is close, but has one small error; you have a period after prepend and before it's invocation.