Question

在提出问题之前，请考虑以下代码，该代码似乎可用于jQuery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="pay" class="input-fieldset"></fieldset>
<fieldset id="address" class="input-fieldset"></fieldset>

var $element = $('.input-fieldset');
$element.classList.add("input-fieldset-awesome");

我发现上面的方法在第一次遇到问题后似乎可以正常工作

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="pay" class="input-fieldset"></fieldset>
<fieldset id="address" class="input-fieldset"></fieldset>

$('.myElement').css('size', '100px');

哪个抛出错误：

无法读取未定义的属性“ add”

在寻找解决方案的过程中，我发现其他人也遇到类似的问题here，但在该示例中，他们没有使用jQuery。另外，发现它是一个this的重复问题，该最高答案表明$('.input-fieldset').classList.add("input-fieldset-awesome");是可能的。但是，如果那应该起作用，那为什么不这样做：

{{1}}

这是第一个问题；我的另一个问题是：在上面的工作解决方案中，我使用“ [0]”取消引用了$（this）对象中的第一个元素，我知道其中应该只有一个元素，但这确实是最好的解？（对我来说，我完全需要“ [0]”似乎很奇怪……）

Answer 1

.classList是 native HTMLElement上的一个属性。 $('<selector>')返回一个jQuery集合，这是完全不同的。 jQuery集合方法的名称与元素方法的名称不同。

jQuery确实具有允许您通过addClass添加类的功能，该功能会将选定的类添加到集合中的每个元素：

var $elements = $('.input-fieldset');
$elements.addClass("input-fieldset-awesome");

.input-fieldset-awesome {
  border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="pay" class="input-fieldset"></fieldset>
<fieldset id="address" class="input-fieldset"></fieldset>

请注意，由于jQuery集合是集合而不是单个元素（通常），因此最好适当地命名变量-例如，var $elements而不是{{ 1}}。

Answer 2

jQuery具有自己的类更改方法，例如addClass()，removeClass()和toggleClass()

混合本机dom方法和jQuery方法会使您的代码基础难以阅读和混淆。

例如，#!/usr/bin/env python # -*- coding: UTF-8 -*-# enable debugging import cgitb cgitb.enable() print("Content-Type: text/html;charset=utf-8") print() print("Hello World!")只返回$(this)[0]

是没有意义的

使用一个或另一个，并始终坚持相同的方法。

如何引用/修改使用jQuery类选择器找到的类列表中的元素

2 个答案: