Question

e.g。对于下面的内容，我如何添加类.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

id全局属性定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。其目的是确定元素......

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>

Answer 2

如果您控制生成div的方式，则可以轻松地将nostock类附加到文本中包含nostock的每个元素：

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

您的jQuery现在更容易做到：

<script>
    $(function () {
        var noStockLen = "nostock".length + 1;
        $(".nostock").each(function (index, value) {
            value.innerText = value.innerText.substring(0, value.innerText.length - noStockLen);
        });
    });
</script>

Answer 3

ID必须是唯一的。您应该使用其他属性。

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

<script type="text/javascript">
    $('[name="variant"]:contains("nostock")').addClass('out-of-stock');
</script>

如何检查具有相同ID的div数量的内容，并将类添加到包含特定文本的那些？

3 个答案: