JSFiddle - React, Tailwind, and code Playground

by toshimaru

HTML

<div id="all-tours">
  <h1>Guided Tours</h1>
  <ul>
    <li class="usa tour on-sale" data-discount="299">
      <h2>New York, New York</h2>
      <span class="details">$1,899 for 7 nights</span>
      <button class="book">Book Now</button>
      <span class="details">$1,899 for 7 nights</span>
    </li>
    <li class="europe tour on-sale" data-discount="176">
      <h2>Paris, France</h2>
      <span class="details">$2,299 for 7 nights</span>
      <button class="book">Book Now</button>
      <span class="details">$2,299 for 7 nights</span>
      <ul>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
        </ul>
    </li>
    <li class="asia tour" data-discount="349">
      <h2>Tokyo, Japan</h2>
      <span class="details">$3,799 for 7 nights</span>
      <button class="book">Book Now</button>      
      <span class="details">$3,799 for 7 nights</span><ul>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
        </ul>
    </li>
  </ul>
  <ul id="filters">
    <li><button class="on-sale">On Sale</button></li>
  </ul>
</div>

JavaScript

$(function(){
    var count = 10000;
    
    console.time("first");
    for (var i = 0; i < count; i++) {
        $('.tour li').text('button ' + i);
    }
    console.timeEnd("first");
    
    console.time("second");
    for (var i = 0; i < count; i++) {
        $('.tour').find('li').text('button ' + i);
    }
    console.timeEnd("second");
});