1

我是 JQuery 的新手，我找到了 Code School，所以我正在参加他们的课程来学习它。我正在完成一项挑战，这是提出的挑战：

使用任何必要的工具找到所有靠窗的座位（头等舱 a 和 d，经济舱 a 和 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');

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

4

5 回答 5

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

小提琴

于 2012-12-08T22:40:21.657 回答
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

于 2012-12-08T22:41:08.083 回答
2

虽然您的答案已成功找到您正在寻找的元素。这让你的队友（在现实世界的项目中）很难理解你做了什么，甚至对你自己来说也很难维护。

如果给你的规范是错误的（常见的）或改变了怎么办？（常见）-在大型项目中，此代码：$('#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');

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

于 2012-12-08T22:46:17.467 回答
1 
var fc = $('#first_class li').filter('.a, .d');
var ec = $('#economy_class li').filter('.a, .f');
var all = fc.add(ec);
于 2012-12-08T22:41:55.770 回答
0 
var all = $('#first_class.d, #economy_class.f, .a');
于 2012-12-08T22:46:23.393 回答