JSFiddle - React, Tailwind, and code Playground

by Norlihazmey Ghazali

HTML

<div class="content projects">
  <div class="row long">
    <h1>Projects</h1>
    <div class="p-filter">
      <form class="cf">
        <select name="filter" id="filter" class="filter right">
          <option>---</option>
          <option value="corporate">Corporate</option>
          <option value="education">Education</option>
          <option value="healthcare">Healthcare</option>
          <option value="residential">Residential</option>
          <option value="religious">Religious</option>
        </select>
        <!-- <input type="text" name="search" id="search" class="search">
                    <input type="submit" value="Search"> -->
      </form>
    </div>
    <div class="col_08">
      <p class="no-results">No results exist. Please choose another selection.</p>
      <ul class="cf listItem">
        <li class="active odd">
          <a href="/assets/img/misc/carpentry/saks_2.jpg" class="fancybox" rel="gallery"><img alt="Corporate - Saks Fifth Avenue 2" src="/assets/img/misc/carpentry/saks_2.jpg"></a>
        </li>
        <li class="active even">
          <a href="/assets/img/misc/carpentry/saks_3.jpg" class="fancybox" rel="gallery"><img alt="Corporate - Saks Fifth Avenue 3" src="/assets/img/misc/carpentry/saks_3.jpg"></a>
        </li>
        <li class="active odd">
          <a href="/assets/img/misc/carpentry/saks_4.jpg" class="fancybox" rel="gallery"><img alt="Corporate - Saks Fifth Avenue 4" src="/assets/img/misc/carpentry/saks_4.jpg"></a>
        </li>
        <li class="active even">
          <a href="/assets/img/misc/carpentry/st_teresa_of_avilia_1.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. Teresa of Avilia" src="/assets/img/misc/carpentry/st_teresa_of_avilia_1.jpg"></a>
        </li>
        <li class="active odd">
          <a href="/assets/img/misc/masonry/university_saint_mary_boathouse_1.jpg" class="fancybox" rel="gallery"><img alt="Education - University of Saint Mary on the Lake Boathouse 1"...

JavaScript

var $li = $('.listItem li');
$('#filter').on('change', function() {
  var value = $(this).val();
  var filteredElem;
  $('.listItem').empty();

  filteredElem = $li.filter(function() {
    var alt = $(this).find('img').attr('alt');
    var split = alt.split(' ');
    var lower = split[0].toLowerCase();
    if (lower == value) {
      $(this).addClass('active');
      return $(this);
    }
  });
  $('.listItem').append(filteredElem)
  console.log(filteredElem)

});