jquery DOM Traversal

by Jason Aden

HTML

<div class="parent">
  <p>.parent</p>
  <div class="child">
    <p>.child</p>
  </div>
  <div class="twins">
    <p>.twins</p>
  </div>
  <div class="twins">
    <p>.twins</p>
  </div>
</div>

CSS

* {
    box-sizing: border-box;
}

.parent {
  width: 90%;
  border: 5px solid #E18728;
  float: left;
}

.child {
  width: 90%;
  padding: 20%;
  border: 4px solid black;
  margin: .5em auto;
}

.twins {
  width: 50%;
  padding: 1em;
  border: 4px solid black;
  float: left;
}


/* styling for Pen, not related to box-sizing or layout */

body {
  font-family: sans-serif;
  font-size: 1.1em;
}

p:not(.intro) {
  text-align: center;
}

.highlight {
    background-color: yellow;
}

JavaScript

// Parents, children, siblings
// Follow the directions for selecting the element. 
// This is practice for finding elements using traversal
// methods such as .parent(), .children(), etc. To highlight
// the selected element(s) use <selected>.addClass('highlight');


/** CHILDREN SELECTORS **/
var parent = $('.parent');

// 1. Find the last .twins element

// 2. Select both .twins elements

// 3. Highlight all <p> tags other than ".parent"

/** SIBLINGS **/
var child = $('.child');

// 4. Highlight the .twins elements

// 5. Select self and the last .twins element

// 6. Select self and both .twins elements

/** PARENTS **/

var childPara = $('.child p');

// 7. Highlight the .parent element (whole box)

// 8. Select all p tags inside .twins

// 9. Highlight .child and .twins