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

Raphael Chen
Raphael Chen
Front End Web Development Techdegree Student 8,751 Points

Unsure of why code not working

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

Can anyone explain why the former code does not work?

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

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 83,234 Points

Try including the string value you're assigning to "checkbox" as the argument to the prepend method. Remove $checkbox completely. There's nothing wrong with the method you're using but the code challenge isn't expecting it.