使用jQuery通过类名获取元素

Question

我将使用JQuery来获取具有"class x"的元素列表。

HTML代码:

<p class="x">Some content</p>
<p class="x">Some content#2</p>

如果我们使用Jquery来获取这两个html元素并对其进行操作 - 我们可以使用以下代码： $(".x").text("更改的文本");

这将更改两个段落的文本。从$(".x") - 我们如何添加一个数组 - 下标符号，就像我们可以使用getElementsByclassName一样：

document.getElementsByClassName("x")[0].innerHTML

我尝试了这个$(".x")[0].text("asasa")- 它不起作用，在javascript控制台中出现类型错误。我还在这里尝试了get API - http://jsfiddle.net/probosckie/jnz825mp/ - 但它也不起作用。

错误是Uncaught TypeError: $(...).get(...).text不是一个函数。以下解决方案都不起作用！

- Probosckie

Answer 1

您可以使用get()方法从数组中获取元素，例如：

$(".x").get(index).textContent = "changed text";

更多信息: https://api.jquery.com/jquery.get/ 如果想要获取HTML（即innerHTML），您需要调用.html()函数：

// This is equal to document.getElementsByClassName("x")[0].innerHTML
$(".x").get(0).innerHTML;

如果您想设置HTML，只需在函数调用中提供您的HTML代码，如下所示：.html('<h1>你好，世界！</h1>')。 编辑： .get() 返回DOM对象而不是jQuery包装的元素。因此.text()和.html()不起作用。除非您进行包装。

更多选项：

$(".x").get(0).innerHTML;
$($(".x").get(0)).html();
$(".x:first").html();

- alesc

---

你意识到如果你有1000个.x，它将填充jQuery对象中的1000个项目（在过滤之前）。 - Royi Namir

没错。在这种情况下，最好采用另一种方法进行优化。也许可以使用 document.querySelector('.x')，它只返回一个元素（第一个元素）。如果你愿意，还可以将其包装在 jQuery 中。 - alesc

未捕获的 TypeError: $(...).get(...).text 不是一个函数。 - Probosckie

我进行了编辑。.get() 不会返回 jQuery 元素，而是普通的 DOM 元素。因此，您无法在其上调用 jQuery 特定的函数。 - alesc

好的，谢谢。明白了。你有什么办法可以从jQuery数组中获取特定元素吗？ - Probosckie

具体是以什么方式？按索引还是其他标准？ - alesc

Answer 2

您可以像这样操作：

$('.x:eq(0)').text('changed text');

或者：

$('.x').eq(1).text('bbb');

两者都运行良好

抱歉之前的回答不准确。

- Zexi Li

---

这个不起作用。我在Chrome中尝试了一下，控制台显示错误。 - Probosckie

@Prabhas 你可以尝试这个。 - Zexi Li

Answer 3

解决方案$(".x").get(index)...将首先匹配所有.x（这会影响性能）。然后它将进行过滤。

如果您有1000个.x，它将在jQuery对象中填充1000个项目（在过滤之前）

但是

$(".x:first").text("changed text");会更好，因为它不会产生所有的.x，然后再进行过滤，而是在第一步就完成了操作（而不会填充1000个项目）

- Royi Namir