Question

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

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

该代码仅在如上所述的情况下工作，即，如果[0]被移动到第二行并从第一行移除，或者如果它们在两行中都存在/不存在，则它将失败。

我理解输出差异......

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

...但我不理解在什么情况下你可以获得一系列元素，并且你需要梳理出确切的元素。

感谢所有人的答复！很明显帮助我弄清楚这个问题可能让JS / jQuery方法感到困惑。最终版本：

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

Answer 1

.classList方法并未得到广泛支持（例如，不在MSIE 9.0中），因此它不可移植，但它存在的速度很快。

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

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

或者更好的是，如果该类意味着我的想法，请使用.hide()并让jQuery为您完成工作，可能会在此过程中动画转换。

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

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

虽然有一个小缺点，但如果找不到该元素，此代码将崩溃（因为.getElementById将返回null）而jQuery默默地忽略对空选择器进行的调用

至于元问题 - 如果你想访问jQuery对象中位置[n]的单个DOM元素，你可以使用n，就像你在使用{{{}时所做的那样1}}。

使用.classList获取表示该DOM元素的jQuery对象，例如如果你想将jQuery方法应用于那个（单个）元素。

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

Answer 2

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

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

这：

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

意味着你获得了#Snowsports-row的第一个实例（请记住，如果只有一个具有此id的元素，则更好），但是使用jQuery选择器获得DOM对象（纯javascript）。你可以在jQuery中做同样的事情：

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

查看更多：

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

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

Answer 3

首先，通过使用jQuery擅长它，您可以替换它：

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

用这个：

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

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

使用$('#Snowsports-row')创建一个jQuery对象，其中包含与select '#Snowsports-row'匹配的所有DOM元素。
然后使用[0]进入jQuery对象并获取该jQuery对象中的第一个DOM对象。
然后，在该DOM元素上使用属性/方法，以确定该DOM元素上是否存在具有.classList.contains("hidden")引用的类。
然后，如果您找到该课程，请将其删除。

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]，则可以使用{{ 1}}喜欢这些：

.eq(0)

现在，在这种特定情况下，这是绝对必要的，因为$('#Snowsports-row').eq(0).removeClass("hidden");不能包含多个DOM元素，因为内部jQuery只会在您搜索ID值时返回第一个匹配的DOM元素（因为那里＆＃39; s永远不应该是一个具有相同ID的匹配元素。）

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

Answer 4

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

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

Answer 5

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

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

对可能没有该类的元素调用removeClass也没有害处......所以：

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

Answer 6

在第一行中，您选择一个特定的DOM元素，而在第二行中，您选择DOM中适合该选择器的所有元素，并从所有元素中删除“隐藏”类。基本上检查元素是否具有类只能在元素上执行（这就是为什么需要选择索引，指定给定元素），但是jQuery允许你删除列表中每个元素的类（因此你的第二行））

在JS中，你需要按数组顺序识别元素？

6 个答案: