Как изменить цвет div с помощью jquery?

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 (имеющего имя класса price-new), который имеет (вне статуса) message.i пробовал приведенный ниже код, но он меняет цвет для всех div, имеющих имя класса 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

Попробуйте это: вы можете найти родительскую таблицу с помощью closest(), а затем найти price-new внутри prod-price DIV с помощью .find()

ПРИМЕЧАНИЕ - У вас есть текст как «(нет на складе)» и сравнивается с «Нет на складе», поэтому либо используйте скобки в тексте для сравнения или использования indexOf как if($(this).text().indexOf('Out of Stock')!=-1), также вы помещаете цвет = черный, который уже существует по умолчанию (как я могу видеть в общем коде, но он может быть другим в действительности), поэтому попробуйте другой цвет, чтобы отличить. Я использовал красную ссылку 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 2

Вы должны получить родителя, а затем найти ребенка:

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

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

Вы должны сравнить текст с '(Нет на складе)' NOT с «Нет в наличии». == будет сравнивать точный текст. if($.trim($(this).text()) == '(Out of Stock)') {
OR
Если вы хотите проверить, что «нет в наличии» присутствует в элементе html, просто измените условие, чтобы найти подстроку, например.
if($(this).text().trim().indexOf('(Out of Stock)') !== -1) {