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_ad
s 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');