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

Using each() and prepend() - error thrown back.

Hi, I'm trying to prepend a checkbox in front of every list item (<li>) in an unordered list (<ul>), I'm using the following code. When I hit "Preview", it shows that checkmarks are appearing in front of all the list items.

I even tried copying the code to my local machine and changing the browser. Additionally, I searched google, jquery standard documentation and other resources to ensure that my syntax is correct.

However, I'm unable to understand what really is the error here (unless I'm missing something really trivial here).

In case you need more details, please let me know.

Cheers, Nimish.

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'/>");
});

3 Answers

Erik Krieg
Erik Krieg
43,037 Points

My assumption as to why your first answer didn't pass isn't because your code didn't work, but because of how the challenge actually checks for the correct answer.

What I think that they are doing to check that your answer is correct is basically a just strict string comparison, like:

yourPrependValue === '<input type="checkbox"/>'

This would explain why changing from single to double quotes allowed you to pass the challenge.

Alright, I was eventually able to resolve this, although I'm still not sure why or how. Below is the successful code. The only change I really see in my previous code and current code is the interchange of double-quote marks (" ") versus the single-quote marks (' ') in the argument for prepend.

Can anyone help me understand if there is a hard and fast rule or some standard documentation on why and when single-quote marks v/s double-quote marks are to be used in javascript (and by extension in jQuery well?)?

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

Thanks a lot. Nimish.

Thanks a lot Erik. That explains.

I also searched on the internet the semantic difference between double-quote v/s single-quote in JavaScript, but noticed they could commonly be interchanged, but they occur in pairs, and that we have to be careful about escaping those characters, if they end up in string multiple times.

Anyway, it's good to know that I was or wasn't making a trivial / syntactical mistake.

Appreciate it!

Cheers, Nimish.

Erik Krieg
Erik Krieg
43,037 Points

Np!

Also, good job digging into the problem you ran into and expanding your knowledge. That is exactly the type of behaviour that paves the path to becoming a skilled developer.