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

<div>
<div cl开发者_开发问答ass="popContent">1</div>
<div class="popContent">2</div>
</div>

---

You will kick yourself..... :)

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

---

first occurrence of class in div

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

Second occurrence of class in div

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

---

you can use :first selector in this case

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

DEMO

---

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

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

---

You could use 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

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

---

Use the Jquery :first selector like below :

$(".popContent:first");

---

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

---

You can use the following jQuery expression

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