在 JS 中什么时候需要按数组顺序识别元素？

Question

好的，我终于有了一个代码示例来展示这个！

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

代码只能按照上面写的那样工作，即，如果 [0] 被移到第二行并从第一行删除，或者如果它在两行中都是 present/absent，它会失败。

我了解输出差异...

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

...但我不明白在什么情况下您可以获取元素数组以及您需要在其中梳理出确切的元素。

感谢所有回答！非常清楚地帮助我弄清楚问题可能混淆了 JS/jQuery 方法。最终版本：

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

Answer 1

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

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

在可能没有 class 的元素上调用 removeClass 也没有坏处...所以：

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

Answer 2

在第一行中，您 selecting 一个特定的 DOM 元素，而在第二行中，您 selecting DOM 中的所有元素适合 selector 并从所有这些中删除 "hidden" class。基本上检查元素是否有一个 class 只能在一个元素上执行（这就是为什么你需要 select 索引，指定给定的元素），但是 jQuery 允许你删除class 列表中的每个元素（因此是第二行）

Answer 3

首先，id 必须是唯一的，因此如果您有多个 #Snowsports-only 元素，您可能会遇到问题。

在您的问题中，您将 jQuery 代码与纯 Javascript 代码混合在一起。

这个：

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

意味着你得到了 #Snowsports-row 的第一个实例（记住如果只有一个元素有这个 id 会更好），但是你得到 DOM 对象（纯 javascript) 与 jQuery 选择器。您可以像这样在 jQuery 中做同样的事情：

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

查看更多：

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

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

Answer 4

.classList 方法没有得到广泛支持（例如 MSIE 9.0 中没有）所以它不可移植，尽管它存在的地方速度很快。

由于文档中的每个 ID 都应该是唯一的，并且由于为不存在的 class 调用 removeClass 是无害的，只需将整个调用替换为：

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

或者更好的是，如果 class 意味着我认为它的作用，请使用 .hide() 并让 jQuery 为您完成它的工作，可能会动画化过程中的过渡。

或者，如果您真的想坚持使用 DOM 和 classList，您应该使用 classList 已经支持的 .remove() 方法：

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

虽然有一个小缺点，如果找不到该元素，此代码将崩溃（因为 .getElementById 将 return null），而 jQuery 静默忽略调用空选择器。

至于元问题 - 如果您想访问 jQuery 对象中位置 n 处的单个 DOM 元素，请使用 [n]，因为您使用 .classList.

时完成

您使用 .eq(n) 获得表示该 DOM 元素的 jQuery 对象，例如如果您想将 jQuery 方法应用于该（单个）元素。

如果只有一个元素，或者您希望 jQuery 方法应用于每个匹配元素，只需直接在选择器上调用该方法，就像我在上面所做的那样。

Answer 5

首先，通过使用 jQuery 作为其擅长的地方，您可以将其替换为：

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

有了这个：

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

您的第一段代码执行以下操作：

使用 $('#Snowsports-row')，创建一个 jQuery 对象，其中包含与 select '#Snowsports-row'.
然后使用 [0] 进入 jQuery 对象，并获得该 jQuery 对象中的第一个 DOM 对象。
然后，在该 DOM 元素上使用 property/method 来确定 class 是否存在于具有您的 .classList.contains("hidden") 引用的 DOM 元素上。
然后，如果您发现 class，请将其删除。

一个 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 只会 return 第一个在搜索 ID 值时匹配 DOM 元素（因为永远不会有多个具有相同 ID 的匹配元素）。

请记住，DOM 元素和 jQuery 对象是完全不同类型的对象，它们具有不同的方法。让人有点困惑的是 jQuery 对象包含 DOM 元素的内部列表。但是，如果你正在操作的对象是一个 jQuery 对象，那么你只能调用它的 jQuery 方法。如果你进入 jQuery 对象并拉出一个 DOM 元素，那么你只能调用它的 DOM 方法。

Answer 6

当然可以，因为您正在对列表进行操作。现在，您有点误会了 jQuery/javascript 代码。如果您想使用同一行两次，您基本上可以完全删除 jQuery 并编写如下内容：

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

在 JS 中什么时候需要按数组顺序识别元素？

When in JS you need to identify element by array order?

javascript

jquery

getelementbyid