2011-11-07 89 views
6

我有幾個可排序的列表,我可以將元素拖動到每個列表。jQuery可排序選擇器(「id」與「class」)?

的設置看起來是這樣的:

<ul id="sortable1" class="connectedSortable"> 
<li>Item 1</li> 
<li>Item 2</li> 
<li>Item 3</li> 
</ul> 

<ul id="sortable2" class="connectedSortable"> 
<li>Item 1</li> 
<li>Item 2</li> 
<li>Item 3</li> 
</ul> 

的JavaScript是簡單的,看起來像這樣

(從jQuery網站下面的例子)

<script> 
$(function() { 
    $("#sortable1, #sortable2").sortable({ 
     connectWith: ".connectedSortable" 
    }).disableSelection(); 
}); 
</script> 

到目前爲止好...

問題:

對於jQuery選擇器,我可以使用ul類,而不是兩個列表idids?

喜歡的東西:

<script> 
$(function() { 
    $(".connectedSortable").sortable({ 
     connectWith: ".connectedSortable" 
    }).disableSelection(); 
}); 
</script> 

這會是正確的嗎?

我已經試過這和它的作品...

...但我不知道爲什麼 jQuery的網站給人以既列表ID作爲選擇,而不僅僅是類名的例子?我可以遇到兼容性問題,如果我使用類作爲選擇器?

使用類名作爲選擇器的好處是,我不必事先知道列表id,理論上可以立即創建新列表?

什麼是最佳實踐和種類的「防錯」?

非常感謝!

回答

2

按類選擇是可以的,你的腳本是正確的。

我從來沒有遇到任何兼容性問題,而他們的類選擇元素。

使用類名具有不必指定要匹配的所有元素的ID的優點。它的缺點是匹配比您打算的更多元素的可能性,如果該類在其他元素中被錯誤使用的話。

通過ID指定元素時,您確定只選擇了您想要的元素。因此,當您確切知道要匹配哪些DOM元素並知道其ID時非常有用。正如你注意到的,如果你在飛行中創建元素,這可能是不可能的。

我認爲你的情況最好的做法是使用類名。不要在CSS中使用匹配的類名稱;如果它負責格式化,那麼您(或團隊中的其他人員)可能會忘記它提供的行爲更改,並將其用於其他不相關的元素,僅用於格式化。這可能會導致錯誤。最好有單獨的「行爲」和「表示」類,在CSS中使用表示類,以及在jQuery中選擇元素的行爲類。

+0

非常感謝!這給了我一個關於如何處理列表的好主意! – user1033406

+0

真棒加法,謝謝 – user1033406