在JS中你需要通過數組順序來識別元素嗎？

Question

好吧，所以我終於有一個代碼示例來展示這個！

if ($('#Snowsports-row')[0].classList.contains("hidden") == false) { 
    $('#snowsports-only').removeClass("hidden") 
} 

代碼工作僅限於上面寫的，即如果[0]被移動到第二線路和從第一行去除，或者如果它是存在/在兩行中不存在，它會失敗。

我理解的輸出差...

$('#Snowsports-row') 
=> [<div>...] 
$('#Snowsports-row')[0] 
=> <div>... 

...但我不是在你確定什麼情況下認識得到元素（S）的數組，並在您需要梳理出確切的元素。

感謝所有答案！非常清楚地幫助我弄清楚這個問題可能是JS/jQuery方法混淆。最終版本：

if ($('#Snowsports-row').hasClass("hidden") == false) { 
    $('#snowsports-only').removeClass("hidden") 
} 

Answer 1

首先，通過使用jQuery它所擅長，可以更換此：

if ($('#Snowsports-row')[0].classList.contains("hidden") == false) { 
    $('#snowsports-only').removeClass("hidden") 
} 

與此：

$('#Snowsports-row').removeClass("hidden"); 

你的代碼的第一個塊將執行以下操作：

1. 使用$('#Snowsports-row')，製作一個jQuery對象，其中包含所有與選擇相匹配的DOM元素'#Snowsports-row' 。
2. 然後通過[0]進入jQuery對象並獲取該jQuery對象中的第一個DOM對象。
3. 然後，在該DOM元素上使用屬性/方法，以確定該DOM元素上是否存在與您的.classList.contains("hidden")引用相關的類。
4. 然後，如果您找到該類，請將其刪除。

jQuery對象包含一個DOM元素數組。如果你調用了jQuery對象的一個​​方法本身喜歡：

$('.tableRows').html("hello"); 

然後，你問的jQuery對jQuery對象內的所有DOM元素進行操作。您必須使用jQuery方法，而不是DOM方法。

另一方面，如果您想使用諸如.classList.contains()之類的方法，那只是實際DOM元素上的方法。這不是一個jQuery方法。所以，你必須到達jQuery對象的內部才能得到一個特定的DOM元素。這就是[0]所做的。它到達jQuery對象並從其內部數據結構中獲取第一個DOM元素。一旦擁有該DOM元素，就可以使用該DOM對象上的任何DOM元素方法。

---

僅供參考，如果你想從一個jQuery對象得到的只是第一個DOM元素，但希望得到的結果是一個jQuery對象，而不僅僅是一個DOM元素，而不是[0]，您可以使用.eq(0)像部份：

$('#Snowsports-row').eq(0).removeClass("hidden"); 

現在，在這個特定的情況下，這是從來沒有必要的，因爲$('#Snowsports-row')永遠不能包含多個DOM元素，因爲內部jQuery將只返回當你正在尋找一個ID值第一個匹配的DOM元素（因爲從來不應該有多個具有相同ID的匹配元素）。

---

請記住，DOM元素和一個jQuery對象是完全不同類型的對象，它們有不同的方法。令人困惑的是jQuery對象包含DOM元素的內部列表。但是，如果您正在操作的對象是jQuery對象，那麼您只能在其上調用jQuery方法。如果你到達jQuery對象並提取一個DOM元素，那麼你只能調用它的DOM方法。

Answer 2

使用jQuery的.eq()函數。所以：

var el = $('#Snowsports-row').eq(0); 
if (el.hasClass("hidden")) { 
    $(el.removeClass("hidden") 
} 

還有在調用一個可能不具有類的元素removeClass沒有傷害......所以：

$('#Snowsports-row').eq(0).removeClass('hidden'); 

Answer 3

在你選擇一個特定的DOM元素的第一線，而在第二行中，您將選擇適合該選擇器的DOM中的所有元素，並從所有元素中移除「隱藏」類。基本上檢查元素是否具有類只能在元素上執行（這就是爲什麼您需要選擇索引，指定給定元素），但jQuery允許您刪除列表中每個元素的類（因此您的第二行）

Answer 4

首先，ids必須是唯一的，所以如果您有多個#Snowsports-only元素，您可能會遇到問題。

在你的問題中，你正在混合jQuery代碼與純Javascript代碼。

此：

if ($('#Snowsports-row')[0].classList.contains("hidden") { 
    ... 
} 

，你用得到的#Snowsports-row第一個實例（記住，是更好，如果有這個編號只有一個元素是），但你的DOM對象（純JavaScript）手段jQuery選擇器。你可以做同樣的事情在jQuery的是這樣的：

$('#Snowsports-row').hasClass("hidden") 

查看更多：

https://api.jquery.com/hasclass/

https://developer.mozilla.org/es/docs/Web/API/Element/classList

Answer 5

的.classList方法沒有得到廣泛支持（不MSIE 9.0爲例）所以它不是可移植的，儘管它存在的速度很快。

由於文檔中的每個ID應該是唯一的，並且因爲調用removeClass一類是不存在是無害的，只是取代你的整個呼叫：

$('#Snowsports-row').removeClass('hidden') 

或者更好的是，如果該類意味着我認爲它的作用，請使用.hide()並讓jQuery爲您完成工作，可能會動畫過程中的轉換。

或者，如果你真的想堅持使用DOM和classList，你應該使用班級名冊已經支持.remove()方法：

document.getElementById('#Snowsports-row').classList.remove('hidden') 

雖然有在一個小的不足這段代碼將崩潰，如果該元素沒有找到（因爲.getElementById將返回null），而jQuery靜靜地忽略在空選擇器上進行的調用。

至於元問題 - 如果您想訪問jQuery對象內位置n處的單個DOM元素，則使用[n]，正如您在使用.classList時所做的那樣。

您可以使用.eq(n)來獲取表示該DOM元素的jQuery對象，例如，如果您想將jQuery方法應用於該（單個）元素。

如果只有一個元素，或者您希望將jQuery方法應用於每個匹配元素，請直接在選擇器上調用該方法，如上所述。

Answer 6

當然，因爲你正在經營一個列表。現在，你有點誤解jQuery/javascript代碼。如果你想兩次使用相同的行，你可以基本上完​​全刪除jQuery並寫下如下代碼：

var el = document.getElementById('Snowsports-row'); 
if (el.classList.contains('hidden')){ 
    el.classList.remove('hidden'); 
}