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 trialJames Morrow
1,815 PointsPassing 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
Jacob Baumgartner
9,971 PointsI believe you need to select #message and .removable in separate declarations.
Jacob Baumgartner
9,971 Pointsif you can do both in the same one, you probably need to use two sets of ""
James Morrow
1,815 PointsThanks 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>
Jacob Baumgartner
9,971 PointsI 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')
Jamie Crompton
1,133 Pointsremeber 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)