Thinkful Selector Practice

index.html

<div>
  <h1>jQuery workout: See the JS file for instructions</h1>
  <h2>Note that Codepen will automatically reload when you make changes.</h2>
  <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde perspiciatis a odio eum quas dolorum optio! Nam repellat aperiam recusandae explicabo libero, adipisci a facere quas quibusdam! Rem, nihil, sapiente.</p>
  <ul>
    <li class="item button" id="one">item one <button id="notButton">Don't Click Me</button></li>
    <li class="item text" id="two">item two</li>
    <li class="item button" id="three">item three <button id="someButton">Don't Click Me</button></li>
    <li class="item text" id="four">item four </li>
    <li class="item button" id="five">item five <button id="funButton">Don't Click Me</button></li>
  </ul>
</div>

script.js

$(document).ready(function(){
// This is a playground. Don't be afraid to break it!
// After each goal, write the related code. You can comment out each piece as you write it so you can see the effects of your next line of code. 

// DONT COPY AND PASTE! By typing everything out, each time, it will drill the syntax into your fingers.


// Practicing Selectors:
// Goal 1: Select the h1, and change the text to say "My jQuery Workout". You can write that like this  $('').text('My jQuery Workout'). You will need to change the selector $('') to target the h1.
$('div h1').text('My jQuery Workout');

// Goal 2: Use the same text function to change the h2 to whatever you want.
$('div h2').text('One fish, two fish, three fish, blue fish.');  

// Goal 3: The paragraph should be a little skinnier. Try using the width() function in the same way as the text function, passing in a number, i.e. $('').width(200)
$('p').width('25em');

// Goal 4: There are a few list items. Try changing the text of all of them at the same time. 
//$("li").text('List Items') 

//  Goal 5: Now try changing each one individually, using the id to select the list item, and changing the text to something unique. 
//$("li#one,li#three,li#five").text('The first item')

// Practicing Traversal:
// Goal 1: Start off by selecting the h1, then find all the siblings (use the sibling() function). You can wrap this code in console.log() to log the results. You will need to open the developer tools console to see this. 
console.log($('h1').siblings());
  
  
// Goal 2: Now, narrow down the siblings to just the h2 by passing a parameter to the siblings function, siblings('') , and change the text of the h2. 
$('h1').siblings('h2').text('Codepen is pretty neat-o')  

// Goal 3: starting from the h1, hide all the li with the class of text. This will require you to use siblings() and children() and hide(). 
$('h1').siblings().children('li.text').hide();

// Goal 4: start from the button, using the id to select it. From there, use the hide() function to hide the li with the class button. This goal will require the use of parent() as well as the methods you have used so far. 
$('#funButton').parents('li.button').hide();
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Thinkful Selector Practice.markdown

Thinkful Selector Practice

This pen is designed to give you directed practice with selectors and DOM traversal in jQuery.

Forked from aric johnson's Pen Thinkful Selector Practice.

A Pen by Chris Billiau on CodePen.

License.