JSFiddle - React, Tailwind, and code Playground

by Oscar Jara

HTML

<ul>
    <li class="planning">
      <h2>Headline</h2>
      <p>Lorem Ipsum</p>
    </li>
    <li class="planning">
      <h2>Headline</h2>
      <p>Lorem Ipsum</p>
    </li>
    <li class="landscape">
      <h2>Headline</h2>
      <p>Lorem Ipsum</p>
    </li>
    <li class="landscape">
      <h2>Headline</h2>
      <p>Lorem Ipsum</p>
    </li>
    <li class="environmental">
      <h2>Headline</h2>
      <p>Lorem Ipsum</p>
    </li>
    <li class="environmental">
      <h2>Headline</h2>
      <p>Lorem Ipsum</p>
    </li>
  </ul>

JavaScript

$(document).ready(function(){
    var firstClass = $("ul li:first-child").attr('class');
    
    var isPlanning;
    ($.trim(firstClass) == 'planning') ? isPlanning = true : isPlanning = false;
    
    var isLandscape;
    ($.trim(firstClass) == 'landscape') ? isLandscape = true : isLandscape = false;
    
    var isEnvironmental;
    ($.trim(firstClass) == 'environmental') ? isEnvironmental = true : isEnvironmental = false;
    
    if(isPlanning)
        alert('First child class is planning');
    
    if(isLandscape)
        alert('First child class is landscape');
    
    if(isEnvironmental)
        alert('First child class is environmental');
});