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

shekhar bhardwaj
seal-mask
.a{fill-rule:evenodd;}techdegree
shekhar bhardwaj
Full Stack JavaScript Techdegree Student 12,373 Points
Posted by shekhar bhardwaj
.a{fill-rule:evenodd;}techdegree
shekhar bhardwaj
Full Stack JavaScript Techdegree Student 12,373 Points

What am I doing wrong here, jQuery API document also has the same syntax.

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

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

Can somebody help me understand the issue.

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() {
  const $x = $('<input type="checkbox"/>');
  this.prepend($x);
});

2 Answers

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

Hey Shekhar,

This is close:

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

but you need to call the jquery function on this, not on the string you are appending.

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

You don't have to convert the element text into a jQuery object to use it as an argument, but you can.

The important issue is that "prepend" is a method for a jQuery object, and inside of "each", "this" represents a plain HTML element.

So you need to wrap "this" to make it a jQuery object: :point_right: $(this).