查找 div 中第一次出现的类

Question

我有下面的 html 结构，我想使用 jQuery 找到第一个 div 的内部 html，类为“popcontent”

<div>
<div class="popContent">1</div>
<div class="popContent">2</div>
</div>

Answer 1

你会踢自己的......:)

$(".popContent:first").html()

Answer 2

类在 div 中第一次出现

$('.popContent').eq(0).html('value to set');

第二次出现 类在 div 中

$('.popContent').eq(1).html('value to set');

Answer 3

在这种情况下，您可以使用 :first 选择器

$('.popContent:first').text();

DEMO

Answer 4

$("div.popContent:first").html()

应该给你第一个 div 的内容（在本例中为“1”）

Answer 5

您可以使用 document.querySelector()

返回文档中的第一个元素（使用深度优先
文档节点的前序遍历|按第一个元素
文档标记并按以下顺序迭代顺序节点
子节点的数量）与指定的选择器组匹配。

由于它只查找第一次出现，因此它比 jQuery 具有更好的性能

var count = 1000;
var element = $("<span>").addClass("testCase").text("Test");
var container = $(".container");
var test = null;
for(var i = 0; i < count; i++) {
	container.append(element.clone(true));
}

console.time('get(0)');
test = $(".testCase").eq(0);
console.timeEnd('get(0)');
console.log(test.length);

console.time('.testCase:first');
test = $(".testCase:first");
console.timeEnd('.testCase:first');
console.log(test.length);

console.time('querySelector');
test = document.querySelector(".testCase");
console.timeEnd('querySelector');
console.log(test);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>

jsFiddle 版本的代码段

Answer 6

使用 Jquery :first 选择器 如下所示：

$(".popContent:first");

Answer 7

$("div.popContent:first").html();

Answer 8

您可以使用以下 jQuery 表达式

alert(jQuery('div.popContent').eq(0).html());