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

Joseph Chauvin
Joseph Chauvin
Full Stack JavaScript Techdegree Student 11,205 Points

Does anybody know where I am wrong here? Can't seem to figure it out...

Does anybody know where I am wrong here? Can't seem to figure it out...

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"/>'));
});
Lucan Fraser
Lucan Fraser
Full Stack JavaScript Techdegree Student 9,223 Points

You could console.log the $('.favorite-things li') selector to see what you get, which always helps me. But I believe that you could remove .favorite-things and it will work. you may also want to remove the bullet points from the list items. li { list-style: none;}

1 Answer

Just pass in the '<input type="checkbox"/>' straight to the prepend method as a string:

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