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

HTML Build an Interactive Website Introduction to jQuery Including jQuery in our Project

James Morrow
James Morrow
1,815 Points

Passing class and id

Hi,

I'm trying to select all elements with class "removable" and am not sure why this will not work. Thanks!

<!DOCTYPE html> <html> <body>

<div id="message"> <p>Congratulations!</p> </div>

<ul> <li class="removable">Item 1</li> <li class="removable">Item 2</li> <li class="removable">Item 3</li> </ul>

<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript">$("#message.removable").hide().show('slow')</script> </body> </html>

5 Answers

I believe you need to select #message and .removable in separate declarations.

if you can do both in the same one, you probably need to use two sets of ""

James Morrow
James Morrow
1,815 Points

Thanks for the reply Jacob. I have tried both of the below and neither one works. I am struggling trying to figure out how to call both a class and an id.

<script type="text/javascript">$("#message" ".removable").hide().show('slow')</script> <script type="text/javascript">$("#message").$(".removable").hide().show('slow')</script>

I mean, I don't believe you can access both ids and classes in the same rule. Try: $("#message").hide().show('slow') $(".removable").hide().show('slow')

remeber that classes are "." and that id are "#" when I read your code I read it like this $("#message.removable").hide().show('slow') select (Id=messageClass=removeable") than hide them show slowly

i struggle to understand your intent but heres a few examples that might help $("#message").hide("slow") //select id message and hide them slowly $(".removeable").hide("slow") // select class removeable and hide them slowly

$(#message).click(function() // when I click a message id element it will hide itself slowly $(this).hide("slow") })

$(".removeable").click(function(){ // when I click a removeable class element it will hide itsself slowly $(this).hide("slow") })

if your trying to do them both it would look something like this I belive

$(document).ready(function(){ // when page is ready (startcode) $("#message").hide("slow") //select id message and hide them slowly $(".removeable").hide("slow") // select class removeable and hide them slowly }) // when page is ready (endcode)