Question

我的网站中有多个项目具有相同的班级名称，这是我的单项价格部分的代码

<tr>
    <td>
        <table cellspacing="0" cellpadding="0" width="100%">
            <tbody>
                <tr>
                    <td>
                        <div class="prod-price">
                            <span class="price-old" style="display: none;">9.90</span>
                            <span class="price-new">9.90</span>
                        </div>
                        <div style="font-size: 0.8em; padding-top: 4em; display: none;" class="save- sale">0.00</div>
                        <div class="pc"></div>
                    </td>
                    <td>
                        <div class="prod-price">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="medtext">&nbsp;<b>(Out of Stock)</b></td>
                </tr>
            </tbody>
        </table>
    </td>
</tr>

我需要做什么我想改变只有那个div（具有类名称价格 - 新）的颜色（具有（超出状态）message.i尝试下面的代码但它改变了所有div的颜色class name price-new我希望这个脚本仅适用于那些使用jquery或java脚本的缺货消息的项目。

这是我试过的

JS代码： -

<script>
    $(function () {
        $(".medtext").each(function () {
            if ($.trim($(this).text()) == 'Out of Stock') {
                $(".price-new").css("color", "black");
            }
        });
    });
</script>

Answer 1

你需要得到父母，然后找到孩子：

$(function () {
    $(".medtext").each(function(){
        if($.trim($(this).text()) == '(Out of Stock)') {
            $(this).parent().parent().find(".price-new").css("color","red");
        }
    });
});

Answer 2

试试这个：您可以使用closest()查找父表，然后使用price-new在prod-price div中找到.find()

注意 - 您的文字为＆＃39;（缺货）＆＃39;并且与“缺货”进行比较，所以要么将圆括号放在文本中进行比较，要么使用indexOf像if($(this).text().indexOf('Out of Stock')!=-1)一样，你也会把color = black放在默认情况下已经存在（因为我可以请参阅共享代码，但实际上可能有所不同），因此请尝试使用其他颜色进行区分。我在DEMO链接中使用了红色。

<script>
  $(function () {
    $("td.medtext").each(function(){
      if($.trim($(this).text()) == '(Out of Stock)') {
       $(this).closest('table').find(".prod-price .price-new").css("color","black");
      }
    });
  });
 </script>

<强> DEMO

Answer 3

假设您有一对包含多对行的表，您可以这样做：

<script>
  (function($) {
    $(function () {

      $('td.medtext:contains("(Out of Stock)")')
      .closest('tr').prev('tr')
      .find('.prod-price .price-new')
      .css('color', 'black');

    });
  })(jQuery);
</script>

即使html中根本没有tds，也可以执行此行。根本没有香草JS。

Answer 4

您应该将文字与＆＃39;（缺货）＆＃39;进行比较。不与＆＃39;缺货＆＃39;。 ==将比较确切的文字。像这样if($.trim($(this).text()) == '(Out of Stock)') {
OR
如果你想检查“缺货”＆＃39;存在于html元素中然后只需更改条件以查找例如
的子字符串 if($(this).text().trim().indexOf( '(Out of Stock)') !== -1) {

如何使用jquery更改div的颜色？

4 个答案: