CODEWITHSUNDEEP
javascriptjqueryajax
John
John

Reputation: 833

Count html elements in ajax returned data

I've got a jquery $.ajax call that returns a set of html from data.html which is like;

<div class="blah"><li>test</li></div>
<div class="blah"><li>test</li></div>
<div class="blah"><li>test</li></div>
<div class="blah"><li>test</li></div>

I'd like to count the amount of elements that have a class of .blah and i'm not sure how to do this.

I've tried:

data.html.getElementsByClassName('blah').length

but that obviously doesn't work!

Any suggestions gratefully received!!

Upvotes: 0

Views: 3188

Answers (3)

Mayank Gupta
Mayank Gupta

Reputation: 193

$('.blah','context').length

Replace context by object in which you want to search

Upvotes: 0

guest271314
guest271314

Reputation: 1

Try utilizing .hasClass()

var data = {};
data.html = '<div class="blah item item-wrapper print"></div>'
            + '<div class="blah item item-wrapper digital"></div>';

var len = $.grep($.parseHTML(data.html), function(el, i) {
  return $(el).hasClass("blah")
}).length;

$("body").html(len);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

Upvotes: 2

Dave
Dave

Reputation: 10924

You should be able to do this using either .filter() or .find(), depending on the exact format of your returned HTML. If the format is is exactly as you have stated, then the following should work:

$.get("data.html", function(data) {
  var length = $(data).filter(".blah").length;
});

If there is some sort of wrapper element around your items with class blah, then you would use .find():

$.get("data.html", function(data) {
  var length = $(data).find(".blah").length;
});

Upvotes: 1

Related Questions