How to select an object if it contains a number with jquery?

Question

Hi there,

I have a couple divs like so:

<div>1</div>
<div>2</div

all the way through to

<div>11</div>
<div>12</div>

And so on.

What I'm wanting is a jquery select that picks one of these, like so:

$('.ticketNumber:contains("1")').addClass('something');

The problem with this of course, is its going to select any of the divs that contain the number 1 and not just the one that only contains 1.

So how does one go about telling jquery to do an exact select rather than a wildcard type?

Answer 1

SEE http://stackoverflow.com/questions/1883922/jquery-text-match

Answer 2

While filter is an easy option, you could do a little preprocessed to select more quickly.
This code created an array of tickets, for easy access. This is good if they don't change often, and have small numbers (otherwise the array would be too big, but you can easily switch to an associative array):

var tickets = [];

$(function(){
  $('div').each(function(){
    var div = $(this);
    var n = parseInt(div.text(), 10);
    tickets[n] = div;
  }); //div.each

  tickets[12].css('color', 'red');
}); //doc.ready

The next option is less popular, but works well. jQuery does similar things internally, by the way. Here, we use attr to add a custom attribute and select by it (if it bothers you, you can add a class like ticket12, or use a standard attribute). This is easier to maintain than an array if you make a lot of changes to your page:

$(function(){ 
  $('div').each(function(){ 
    var div = $(this); 
    var n = div.text(); 
    div.attr('ticket', n); 
  }); //div.each 

  $('[ticket=3]').css('color', 'blue'); 
}); //doc.ready

See both examples in action here: http://jsbin.com/etapu3

Answer 3

you can extend the selector

$.extend($.expr[':'],{
  containsNumber: function(a,i,m) {

    var text = $(a).text();

    return parseInt(text) == parseInt(m[3]);
  }
});

then you can use your extended selector

$('.ticketNumber:containsNumber(1)').addClass('something');

Answer 4

Thanks everyone.

What i wound up using was :eq in the end