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

Posted by nimishhathalia2
nimishhathalia2
6,653 Points

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

eck
eck
43,038 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.

nimishhathalia2
nimishhathalia2
6,653 Points
nimishhathalia2
nimishhathalia2
6,653 Points

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.

nimishhathalia2
nimishhathalia2
6,653 Points
nimishhathalia2
nimishhathalia2
6,653 Points

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.

eck
eck
43,038 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.