javascript - 匹配精确值的 jQuery 选择器

Question

我正在尝试选择 td其中包含一个变量，所以我现在要做的是:

$('td:contains('+ splitDate[0] + ')').empty().append(
    '<div class="ex-half-done ex-base">' + splitDate[0] +'</div>'
);

但在这个例子中splitDate[0]是“1”，所以现在它选择每个 td其中包含一个“1”。

但是如果它与 splitDate[0] 的精确值匹配，我想做什么比append <div class="ex-half-done ex-base">

我该怎么做？我已经找到了类似 jQuery 的 filter() 的东西像这样:

var $results = $('td').find(splitDate[0]).filter(function()
    return $(this).text() === splitDate[0];
});
console.log('result', $results);

$results.css('color', 'red');
$results.empty().append('<div class="ex-done ex-base">' + splitDate[0] +'</div>');     

但这会返回我每一个 td .

这是 td 的示例元素:

<td _ngcontent-c1="" tappable="" class="monthview-selected monthview-current" ng-reflect-ng-class="monthview-selected monthview-c">
  <!--bindings={"ng-reflect-ng-template-outlet": "[object Object]",
  "ng-reflect-ng-outlet-context": "[object Object]"
}-->2 </td>

这是图片

还有 console.log('check', splitDate[0]) = check 1 的示例

Answer 1

尝试:

var $results;
$('td').each(function(){
  if($(this).html() == splitDate[0]){
    $results = $(this);
  }
});
console.log('result', $results);
$results.css('color', 'red');
$results.empty().append('<div class="ex-done ex-base">' + splitDate[0] +'</div>');  

这将确保它完全匹配。

或者少一点代码:

$('td').each(function(){
  if($(this).html() == splitDate[0]){
    $(this).empty().css('color', 'red').append('<div class="ex-done ex-base">' + splitDate[0] +'</div>');
  }
});

您想知道吗 MORE ？

更新

根据您的示例，我有一个可以分享的工作示例:

https://jsfiddle.net/Twisty/ugrw8hjb/

HTML

<table>
  <tr>
    <td _ngcontent-c1="" tappable="" class="monthview-selected monthview-current" ng-reflect-ng-class="monthview-selected monthview-c"> 1 </td>
    <td _ngcontent-c1="" tappable="" class="monthview-selected monthview-current" ng-reflect-ng-class="monthview-selected monthview-c"> 2 </td>
    <td _ngcontent-c1="" tappable="" class="monthview-selected monthview-current" ng-reflect-ng-class="monthview-selected monthview-c"> 3 </td>
    <td _ngcontent-c1="" tappable="" class="monthview-selected monthview-current" ng-reflect-ng-class="monthview-selected monthview-c"> 4 </td>
    <td _ngcontent-c1="" tappable="" class="monthview-selected monthview-current" ng-reflect-ng-class="monthview-selected monthview-c"> 5 </td>
  </tr>
</table>

JS

var splitDate = [2, 1, 2017];
$(function() {
  $('td').each(function() {
    if ($(this).text().trim() == splitDate[0].toString()) {
      $(this).empty().css('color', 'red').append('<div class="ex-done ex-base">' + splitDate[0] + '</div>');
    }
  });
});

由于内容类似于“2 ”，您可能需要使用 .trim() 删除空格。这将有助于确保“2”==“2”，导致“2”!=“2”。另外，根据您的其他更新，您似乎有一个整数数组。您将需要使用 .toString() 来帮助比较字符串与字符串。