JavaScript jQuery Basics Working with jQuery Collections Working with jQuery-Specific Selectors

Xavi Guasch
Xavi Guasch
6,682 Points

CHALLENGE: Working with JQuery specific selectors. Where am I wrong?

This is my solution. Can't figure out why it doesn't work.

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" title="no title" charset="utf-8">
</head>
<body>
    <h2>Star Trek Characters</h2>

    <ul class="character-list">
        <li>Captain Jean Luc Picard</li>
        <li>Data</li>
        <li>Warf</li>
        <li>Dr. Crusher</li>
    </ul>

    <div>I am supposed to stay hidden!</div>    

    <script
    src="jquery-3.2.1.min.js"></script>
    <script src="app.js"></script>
</body>
</html>
app.js
const $hiddenItems = $('li:hidden');
$hiddenItems.show();

4 Answers

Olga Díaz Cerezo
Olga Díaz Cerezo
14,290 Points

I think your code would work, but maybe in this challenge they want it different, without assigning the lis and divs to variables. I've done it this way, and it works:

$('li:hidden').show();
$('div:hidden').show();
Olga Díaz Cerezo
Olga Díaz Cerezo
14,290 Points

They say there is also a div element that is hidden, so you have to show it the same way you've done with the li elements.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 68,643 Points

As a Trekkie, I'd love to think the answer is because one of the list items says "Warf" instead of "Worf" ;)

Xavi Guasch
Xavi Guasch
6,682 Points

Thanks for the response, but how do I add the div element? I've tried this way:

const $hiddenItems = $('li:hidden', 'div:hidden');
$hiddenItems.show();

And also this way:

const $hiddenItems = $('li:hidden');
$hiddenItems.show();

const $hiddenDiv = $('div:hidden');
$hiddenDiv.show();

Neither of them works....

Xavi Guasch
Xavi Guasch
6,682 Points

Yes, now it works!

Muchas gracias, Olga! :)