div에서 첫 번째 클래스 찾기

div에서 첫 번째 클래스 찾기

---

아래의 html 구조가 있습니다. jQuery를 사용하여 클래스가 "popcontent"인 첫 번째 div의 내부 html을 찾고 싶습니다.

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

---

당신은 스스로를 차게 될 것입니다 ..... :)

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

---

div의 첫 번째 클래스

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

div에서 두 번째 클래스 발생

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

---

:first이 경우 선택기를 사용할 수 있습니다.

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

데모

---

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

첫 번째 div의 콘텐츠를 제공해야합니다 (이 경우 "1").

---

아래와 같이 Jquery : first 선택기를 사용하십시오 .

$(".popContent:first");

---

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 버전의 스 니펫

---

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

---

다음 jQuery 표현식을 사용할 수 있습니다.

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

참조 URL : https://stackoverflow.com/questions/6423804/find-first-occurrence-of-class-in-div