Select element based on EXACT text contents

I have a list of divs that all contain a p tag classed as index. The textual content of these p tags is a number from 1 to n (although probably no more than maybe 30-40). I had the following selector, which worked fine in preliminary testing:

var ad = $('.existing_ad .index:contains('+index+')').parents('.existing_ad');

Where index is the numeric index I retrieved from the p tag and .existing_ad is the class of the parent div. As I said, this worked fine... until I went with higher numbers. For instance, when the index is 1, it selects the .existing_ads where the index HAS A 1 IN IT, e.g. 1, 10-19, 21, 31, etc.

How can I get ONLY index n?


How about this:

$('.existing_ad .index').filter(function() {
    return $(this).text() == index;
}).parents('.existing_ad');

If you use it a lot, you could create an extension

$.expr[":"].containsExact = function (obj, index, meta, stack) {
  return (obj.textContent || obj.innerText || $(obj).text() || "") == meta[3];
};

$('div:containsExact('John') will match <div>John</div> but not <div>Johnny</div>

For the original question, it would be

var ad = $(".existing_ad .index:containsExact('"+index+"')").parents('.existing_ad');