80

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

<div>
<div class="popContent">1</div>
<div class="popContent">2</div>
</div>
joeljpa
  • 317
  • 2
  • 13
Amit
  • 6,839
  • 21
  • 56
  • 90

8 Answers8

169

You will kick yourself..... :)

$(".popContent:first").html()
Codecraft
  • 8,291
  • 4
  • 28
  • 45
  • 3
    Note that `:first` cannot use `querySelectorAll()`, so it queries all elements, then gets the first one, which might yield poor performance if the number of elements is large. – BenMorel Sep 06 '18 at 18:33
23

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');
BenMorel
  • 34,448
  • 50
  • 182
  • 322
Hitesh Modha
  • 2,740
  • 5
  • 28
  • 47
  • 1
    While not incorrect, this isn't optimal. This will select all `.popContent`, and slice one item. Modern browsers can use querySelector to select just the first element in 1 go (Yes the browser will still select all, but the work a lot faster nyways) – Martijn Jun 29 '15 at 12:14
  • 1
    what will be the fastest way to extract particular element from dom @Martijn – Hitesh Modha Jun 29 '15 at 12:17
  • Without benchmarking, this should do well: If there's and parent with an id close: `$('#the_id').find('.popContent:first')`, otherwist just the currently accepted answer. – Martijn Jun 29 '15 at 12:36
  • It's not a mayor improvement, but implement this throughout a website it you will notice a lot more – Martijn Jun 29 '15 at 12:38
  • 1
    According to the [:first selector documentation](https://api.jquery.com/first-selector/), *because `:first` is a jQuery extension and not part of the CSS specification, queries using `:first` cannot take advantage of the performance boost provided by the native DOM `querySelectorAll()` method.* So it's pretty much equivalent, performance-wise, to `.eq(0)`. – BenMorel Sep 06 '18 at 18:31
  • .eq(n) <- **GOLD** Thanks. – Luis Sep 17 '21 at 19:30
17

you can use :first selector in this case

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

DEMO

Vivek
  • 10,978
  • 14
  • 48
  • 66
9
$("div.popContent:first").html()

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

rajasaur
  • 5,340
  • 2
  • 27
  • 22
6

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

Buksy
  • 11,571
  • 9
  • 62
  • 69
4

Use the Jquery :first selector like below :

$(".popContent:first");
Manashvi Birla
  • 2,837
  • 3
  • 14
  • 28
2GDev
  • 2,478
  • 1
  • 20
  • 32
2
$("div.popContent:first").html();
Dan Blows
  • 20,846
  • 10
  • 65
  • 96
renakre
  • 8,001
  • 5
  • 46
  • 99
1

You can use the following jQuery expression

alert(jQuery('div.popContent').eq(0).html());
Pang
  • 9,564
  • 146
  • 81
  • 122
rt2800
  • 3,045
  • 2
  • 19
  • 26