Question

我是JQuery的新手，我找到了Code School，所以我正在学习它。我正在完成其中一项挑战，这就是提出的挑战：

使用任何必要的工具查找所有靠窗的座位（一流的a＆amp; d和经济中的＆amp; f）。

以下是他们提供的代码：

<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>

这就是我想出的：

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

现在这段代码有效，但我想知道是否有更简单/更好的方法来完成挑战？我想尽可能多地学习，以便我的代码干净而有效。

Answer 1

var firstOne  = $('#first_class').find('.a, .b'),
    secondOne = $('#economy_class').find('.a, .f'),
    both      = firstOne.add(secondOne);

FIDDLE

Answer 2

是的，您只需选择<li>元素中的第一个和最后一个<ul>元素：

/* Select window seats in first class. */
$('#first_class ul ul li:first-child, #first_class ul ul li:last-child');

至于您的选择器，您不需要使用克拉。 >符号将仅选择直接元素后代，但如果您刚刚执行此操作则会更灵活：

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

因此，这表示“找到<li>的所有.a元素，其中#first_class的孩子属于{{1}}”，依此类推。

Answer 3

虽然您的答案已成功找到您正在寻找的元素。这使你的队友（在现实世界的项目中）难以理解你所做的事情，甚至对你自己而言也难以维持。

如果您提供的规格错误（常见）或已更改，该怎么办？（常见的） - 在一个大型项目中，这段代码：$('#first_class > li > ul > li.premium.a, li.premium.d, #economy_class >li > ul> li.a, li.f');在我看来会花费更长的时间进行调试，比如：

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');

现在，当我们想要进一步处理我们找到的元素时 - 我们确切地知道它们的用途，我认为这段代码可以帮助我的队友了解正在发生的事情。

Answer 4

var fc = $('#first_class li').filter('.a, .d');
var ec = $('#economy_class li').filter('.a, .f');
var all = fc.add(ec);

Answer 5

var all = $('#first_class.d, #economy_class.f, .a');

Code School挑战JQuery

5 个答案: