Question

我有几个像这样的div：

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

一直到

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

等等。

我想要的是一个选择其中一个的jquery选择，如下所示：

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

当然，问题在于它将选择任何包含数字1的div而不仅仅是包含1的div。

那么如何告诉jquery做一个精确的选择而不是通配符类型呢？

Answer 1

你可以扩展选择器

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

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

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

然后您可以使用扩展选择器

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

Answer 2

虽然filter是一个简单的选项，但您可以进行一些预处理以便更快地进行选择此代码创建了一系列故障单，以便于访问。如果它们不经常更改并且数字较小（这样阵列太大，但您可以轻松切换到关联数组），这是很好的：

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

下一个选项不太受欢迎，但效果很好。顺便说一句，jQuery在内部做类似的事情。在这里，我们使用attr添加自定义属性并按其选择（如果它困扰您，您可以添加类似ticket12的类，或使用标准属性）。如果您对页面进行了大量更改，这比数组更容易维护：

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

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

请参阅此处的两个示例：http://jsbin.com/etapu3

如果对象包含带有jquery的数字，如何选择？

2 个答案: