jquery - 选择包含特定文本的 DIV

Question

我尝试获取带有特定文本的 div，但它给了我错误的结果。

这是我的 html:

<div class="ui-droppable">
  <div class="numb ui-draggable ui-draggable-handle">1</div>
  <div class="numb ui-draggable ui-draggable-handle">10</div>
  <div class="numb ui-draggable ui-draggable-handle">7</div>
  <div class="numb ui-draggable ui-draggable-handle bred">6</div>
</div>

这是我的 jquery:

$('.ui-droppable').find("div.numb.ui-draggable:contains('1')").addClass('cont');

如果我运行 jquery，它会向 div 添加包含 1 和 10 的类。

Answer 1

要精确内容匹配，请使用 filter()方法。虽然find()这里不需要方法将它们组合成一个选择器。

$(".ui-droppable div.numb.ui-draggable:contains('1')").filter(function(){
  return $(this).text().trim() == '1' ; 
}).addClass('cont');

$(".ui-droppable div.numb.ui-draggable:contains('1')").filter(function() {
  return $(this).text().trim() == '1';
}).addClass('cont');

.cont {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ui-droppable">
  <div class="numb ui-draggable ui-draggable-handle">1</div>
  <div class="numb ui-draggable ui-draggable-handle">10</div>
  <div class="numb ui-draggable ui-draggable-handle">7</div>
  <div class="numb ui-draggable ui-draggable-handle bred">6</div>
</div>