在div中找到第一次出現的類

[英]find first occurrence of class in div


I have the below html structure, i want to find the inner html of first div with class as "popcontent" using jQuery

我有下面的html結構,我想找到第一個div的內部html,類使用jQuery作為“popcontent”

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

8 个解决方案

#1


112  

You will kick yourself..... :)

你會踢自己..... :)

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

#2


13  

you can use :first selector in this case

你可以使用:在這種情況下第一個選擇器

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

DEMO

DEMO

#3


12  

first occurence of class in div

第一次出現在div中

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

Second occurence of class in div

第二次出現在div中

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

#4


7  

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

should give you the first div's content ("1" in this case)

應該給你第一個div的內容(在這種情況下為“1”)

#5


3  

Use the Jquery :first selector like below :

使用Jquery:第一個選擇器,如下所示:

$(".popContent:first");

#6


3  

You could use document.querySelector()

你可以使用document.querySelector()

Returns the first element within the document (using depth-first pre-order traversal of the document's nodes|by first element in document markup and iterating through sequential nodes by order of amount of child nodes) that matches the specified group of selectors.

返回文檔中的第一個元素(使用文檔節點的深度優先預先遍歷遍歷|文檔標記中的第一個元素,並按照子節點數量的順序迭代順序節點)與指定的選擇器組匹配。

Since it is only looking for first occurence, it has better performance than jQuery

由於它只是尋找第一次出現,它具有比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

jsFile版本的片段

#7


2  

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

#8


0  

You can use the following jQuery expression

您可以使用以下jQuery表達式

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

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2011/06/21/7207883dccd09676ad4e7190d81a95bb.html



 
粤ICP备14056181号  © 2014-2020 ITdaan.com