znaleźć pierwsze wystąpienie klasy w div

Question

mam poniżej strukturę HTML, chcę odnaleźć wewnętrzną html pierwszego div z klasą jako „popcontent” jQuery

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

Answer 1

Będziesz kopać siebie ..... :)

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

Answer 2

można użyć :first wybierak w tym przypadku

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

DEMO

Answer 3

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

powinno dać pierwszy d iv jej zawartość ("1" w tym przypadku)

Answer 4

Użyj Jquery :first selector jak poniżej:

$(".popContent:first"); 

Answer 5

można użyć następujących jQuery wyrażenie

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

Answer 6

pierwsze wystąpienie klasy w div

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

drugie wystąpienie klasy w div

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

Answer 7

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

Answer 8

Można użyć document.querySelector()

Zwraca pierwszy element w dokumencie (za pomocą głębokości pierwszego pre- kolejność sortowania węzłów dokumentu | przez pierwszy element w znaczników dokumentu i iterowanie przez kolejne węzły według kolejności ilość węzłów podrzędnych), które pasują do określonej grupy selektorów.

Ponieważ patrzy tylko dla pierwszego wystąpienia, ma lepszą wydajność niż jQuery

var count = 1000; 
 
var element = $("<span>").addClass("testCase").text("Test"); 
 
var container = $(".container"); 
 
var test = null; 
 
for(var i = 0; i < count; i++) { 
 
\t 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