Question

I am new to JQuery and I found Code School so I am taking their course to learn it. I am completing one of the Challenges and this is the Challenge presented:

Find all the window seats (a & d in first class, and a & f in economy) using any tools necessary.

Here is the code they provide:

<div id="seating_chart">
  <ul id="first_class">
    <li id="row_1">
      <ul>
        <li class="premium a"></li>
        <li class="premium b"></li>
        <li class="aisle"></li>
        <li class="premium c"></li>
        <li class="premium d"></li>
      </ul>
    </li>
    <li id="row_2">
      <ul>
        <li class="premium a"></li>
        <li class="premium b"></li>
        <li class="aisle"></li>
        <li class="premium c"></li>
        <li class="premium d"></li>
      </ul>
    </li>
  </ul>
  <ul id="economy_class">
    <li id="row_3">
      <ul>
        <li class="a"></li>
        <li class="b"></li>
        <li class="c"></li>
        <li class="aisle"></li>
        <li class="d"></li>
        <li class="e"></li>
        <li class="f"></li>
      </ul>
    </li>
    <li id="row_4">
      <ul>
        <li class="a"></li>
        <li class="b"></li>
        <li class="c"></li>
        <li class="aisle"></li>
        <li class="d"></li>
        <li class="e"></li>
        <li class="f"></li>
      </ul>
    </li>
    <li id="row_5">
      <ul>
        <li class="a"></li>
        <li class="b"></li>
        <li class="c"></li>
        <li class="aisle"></li>
        <li class="d"></li>
        <li class="e"></li>
        <li class="f"></li>
      </ul>
    </li>
    <li id="row_6">
      <ul>
        <li class="a"></li>
        <li class="b"></li>
        <li class="c"></li>
        <li class="aisle"></li>
        <li class="d"></li>
        <li class="e"></li>
        <li class="f"></li>
      </ul>
    </li>
  </ul>
</div>

And here is what I came up with:

$('#first_class > li > ul > li.premium.a, li.premium.d, #economy_class >li > ul> li.a, li.f');

Now this code worked but I am wondering if there was an easier/better way to accomplish the Challenge? I want to learn as much as possible so my code is clean and efficient.

Answer 1

While your answer has successfully found the elements you are looking for. It makes it hard for your team mates (in a real world project) to understand what you have done, and even for yourself this is hard to maintain.

What if the spec you were given was wrong (common) or has changed? (common) – on a large project this code: $('#first_class > li > ul > li.premium.a, li.premium.d, #economy_class >li > ul> li.a, li.f'); will take you far longer to debug in my opinion compared to something like:

var $seating_chart = $('#seating_chart');
var $first_class = $seating_chart.find('#first_class');
var $first_class_window_seats = $first_class.find('.a, .d');
var $economy_class = $seating_chart.find('#economy_class');
var $economy_class_window_seats = $economy_class.find('.a, .f');

Now, when we want to further process the elements that we have found – we know exactly what they are for, and I think this code helps my fellow team mates understand what is going on.