jquery 查找div中第一个出现的类

rt4zxlrg  于 2023-02-08  发布在  jQuery
关注(0)|答案(8)|浏览(218)

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

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

yqkkidmi1#

你会踢自己的...:)

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

kfgdxczn2#

div中类的第一次出现

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

div中第二次出现的类

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

ma8fv8wu3#

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

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

DEMO

w80xi6nr

w80xi6nr4#

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

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

bn31dyow

bn31dyow5#

您可以使用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 version of snippet

u4dcyp6a

u4dcyp6a6#

按如下方式使用Jquery :first selector

$(".popContent:first");
wtzytmuj

wtzytmuj7#

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

tktrz96b8#

可以使用以下jQuery表达式

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

相关问题