在 div 中找到类的第一个匹配项

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

<div>
<div class="popContent">1</div>
<div class="popContent">2</div>
</div>
120915 次浏览
小开

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

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

演示

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

应该给出第一个 div 的内容(本例中为“1”)

小开

使用 Jquery: 第一个选择器如下:

$(".popContent:first");
小开
最佳答案

你会后悔的... ... :)

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

可以使用以下 jQuery 表达式

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

在 div 中类的第一个出现 

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

在 div 中类的第二次出现 

$('.popContent').eq(1).html('value to set');
小开 
$("div.popContent:first").html();
小开

你可以用 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 版本


提交答案