jquery 按 class 名称获取元素

Question

我正在使用 Jquery 获取具有 class "x".

的元素列表

html:

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

如果我们使用 Jquery 获取这两个 html 元素并用它做一些事情——我们使用类似的东西：

$(".x").text("changed text");

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

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

我试过了 $(".x")[0].text("asasa")- 它不起作用，在 javascript 控制台中给出类型错误。我也试过在此处获取 API -http://jsfiddle.net/probosckie/jnz825mp/ - 但它不起作用

错误是Uncaught TypeError: $(...).get(...).text is not a function None 以下解决方案有效！

Answer 1

您可以使用 get() 方法访问数组中的元素，例如：

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

为了获得 HTML (innerHTML) 你调用 .html() 函数：

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

如果您想设置 HTML，那么只需在函数调用中提供您的 HTML 代码，例如 .html('<h1>Hello, World!</h1>')。

EDIT: .get() returns DOM 对象不是 jQuery 包装元素。因此 .text() 和 .html() 不起作用。除非你包起来。

更多选项：

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

Answer 2

你可以这样做：

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

或：

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

两者都很好

对不起我之前的回答..

Answer 3

解决方案$(".x").get(index)...将首先匹配所有 .x（这是糟糕的表现）。然后然后它会过滤

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

但是

$(".x:first").text("changed text"); 会做得更好，因为它不会产生所有 .x 然后过滤，但会在第一个步骤中完成（不填充 1000 个项目）

jquery get elements by class name