Code School挑戰JQuery

我是JQuery的新手，我發現Code School，所以我正在學習它。我完成的挑戰之一，這是挑戰提出：Code School挑戰JQuery

查找使用任何必要的工具，所有靠窗的座位（頭等艙一& d和& F IN經濟）。

下面是他們提供的代碼：

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

下面這段代碼的工作，但我不知道是否有一個更容易/更好的方式來完成挑戰？我想盡可能地學習，所以我的代碼乾淨而高效。

來源

2012-12-08 Yamaha32088

雖然你的答案已經成功找到了你正在尋找的元素。這使得你的隊友（在真實世界的項目中）很難理解你所做的事情，甚至對於你自己也很難維持。

如果給出的規格是錯誤的（共同的）或已經發生了變化，該怎麼辦？（普通） - 在大型項目上的代碼：$('#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-08 22:46:17

感謝這是一個很好的答案，我對這個挑戰的解決方案對我來說無疑是令人困惑的。有了更多的練習，我希望能夠提出更容易維護和理解的代碼。 – Yamaha32088

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

FIDDLE

來源

2012-12-08 22:40:21 adeneo

呀，你可以簡單地在<ul>元素選擇第一和最後一個<li>元素：

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

因此，這表示「找到該類.a這就是#first_class是孩子<li>元素」，並等等。

來源

2012-12-08 22:41:08 theabraham

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

來源

2012-12-08 22:41:55 kidwon

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

來源

2012-12-08 22:46:23

Code School挑戰JQuery

回答

相關問題