найти первое вхождение класса в div

Question

У меня есть структура HTML ниже, я хочу найти внутренний HTML первого div с классом как "popcontent", используя jQuery

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

Answer 1

Ты себя пнишь .....:)

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

Answer 2

первое вхождение класса в div

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

Второе вхождение класса в div

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

Answer 3

вы можете использовать :first селектор в этом случае

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

DEMO

Answer 4

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

должен дать вам содержимое первого div (в данном случае «1»)

Answer 5

Вы можете использовать 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 версия фрагмента

Answer 6

Используйте Jquery: первый селектор , как показано ниже:

$(".popContent:first");

Answer 7

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

Answer 8

Вы можете использовать следующее выражение jQuery

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