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

Chris Theriot
seal-mask
.a{fill-rule:evenodd;}techdegree
Chris Theriot
Front End Web Development Techdegree Student 8,175 Points

I am having trouble completing this code challenge. I do not know how to use the :hidden selector.

I did my own research online but I still cannot see or understand what I am doing wrong. The lesson before this challenge covered how to use specific selectors but did not cover using the :hidden selector. I tried my best to use the methods taught when using other selectors when trying to get this one to work but I am at a loss now. Any help or guidance would be greatly appreciated!

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>Worf</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 hidden = $('<li>:hidden');
hidden.show();

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 87,406 Points

Straight away it looks to me like a problem trying to select an element that has a pseudo selector. :-)

Instead of storing it in a variable try passing the selector directory to the show() method and select the :hidden pseudo selector the same way you would with CSS!

Good luck!

Chris Theriot
seal-mask
.a{fill-rule:evenodd;}techdegree
Chris Theriot
Front End Web Development Techdegree Student 8,175 Points

I'm still lost.... If I'm trying to target the <li> items that are currently hidden and get them to display I need to use the show() method at some point. So, do it put the :hidden selector inside the show() method? In normal CSS I would simply target .li and set the visibility to hidden. I am still not understanding how to do that with jQuery.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 87,406 Points

Here's what I mean.

Instead of using hidden.show();

where hidden refers to the variable, you can pass your jQuery selector directly do it. You're trying to select the li elements in their markup form... but jQuery won't recognise that.

But you can use the selector in its CSS form.

So without giving the answer away explicitly you can do something like

$('select_as_if_your_are_using_css').show()