JSFiddle - React, Tailwind, and code Playground

by Chad Drummond

HTML

<div class="page">
  <div class="wrapper">
      <h1>Hello World</h1>
  
    <ul class="page">
      <li>One</li>
      <li class="highlighted">Two <span>And</span></li>
      <li>Three</li>
      <!-- comment -->
    </ul>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure nesciunt ducimus, quas illum, quos porro quod delectus adipisci ullam, odit fuga iste, recusandae. Totam veniam vero quod est beatae inventore.</p>

  </div>
  
</div>

JavaScript

// Start with `.page` and find all `h1` inside of it

// Start with `ul` and find parent element

// Start with `li` and filter to only `.highlighted`

// Start with `li.highlighted` and find parent element `.page`

// Children
$('ul').children()
$('ul li').not('.highlighted')
$('ul').find('li').each(function() {
  // this == current item
  //alert($(this).text())
  //if ($(this).is('.highlighted')) {
  //  alert()
  //}
});


// 
$('li.highlighted').text(); // return the value
//$('li.highlighted').text('Hello'); // set the value
$('li.highlighted').html(); // return the HTML value
$('li.highlighted').html('two <span>and</span>'); // set the HTML value

// closest
$('ul').closest('.page') // ul.page
$('ul').parents('.page') // div.page

console.log($('p').contents())