javascript - 如何检查具有相同ID的div的内容，并为包含特定文本的div添加一个类？

Question

例如对于下面的内容，我将如何添加类 .out-of-stock 并从第一个和第三个 div 中删除文本“nostock”:

<div id="variant">Blue nostock</div>
<div id="variant">Red</div>
<div id="variant">Yellow nostock</div>
<div id="variant">Green</div>

我试过，下面添加类，但是没有用:

$('#variant:contains("nostock")').addClass('out-of-stock');

谢谢

Answer 1

使用类而不是 id 因为 id 必须对于每个元素都是唯一的。从: https://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/id

The id global attribute defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element ...

JS Fiddle

$('.variant').each(function() {
  var theHTML = $(this).html();
  
  // if it contains nostock
  if (theHTML.indexOf('nostock') > -1) {
    $(this).addClass('out-of-stock');
  }
});

.out-of-stock{
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="variant">Blue nostock</div>
<div class="variant">Red</div>
<div class="variant">Yellow nostock</div>
<div class="variant">Green</div>