jQuery 如果边框颜色和边框宽度 =

Question

我正在尝试遍历多个 div 并找到周围带有蓝色边框的那些。然后，如果该 div 有蓝色边框，请查看它是否包含任何带有蓝色边框或边框宽度为 3px 的 div。如果主 div 有蓝色边框但没有带有蓝色边框或边框宽度为 3px 的 div，则附加一些文本。

我的 jQuery 正在努力寻找带有蓝色边框的主 div，但找不到里面有蓝色边框或边框宽度为 3px 的 div。

这是我的 jQuery

$('.decNode').each(function (e) {
        if ($(this).css('border-color') == 'rgb(0, 0, 255)') {
            console.log('There is a decNode with blue border');
            $('div[id*=RulesBox]').each(function () { console.log($(this).css('border-width'))});
            if ($(this).find('div[id*=RulesBox]').css('border-width') == '3px') {
                console.log('There is a RulesBox with blue border');
                $(this).find('.decNodeHeader h2').append(' - <span style="color:red;">RULES NOT MET</span>');
            }
            else {
            }                
        }
        else {
            //console.log('No decNode with a border');
        }

我的HTML是这样的

<div id="DecNode3011" class="decNode draggable ui-draggable" style="border:3px solid rgb(0, 0, 255);"">
  <div class="decNodeHeader">
    <div style="padding: 12px 12px 0px 12px;"><h2>Div Header Text</h2></div>
  </div>
  <div>
    <div id="RulesContainer7493">
              <div id="RuleSet233105">
                <div id="RulesBox233105" style="border: 1px solid #999999; background-color: #ffffff; padding-top: 8px;">
                  Rule Not Met
                </div>
              </div>
              <div id="RuleSet233106">
                <div id="RulesBox233106" style="border: 3px solid #0000FF; background-color: #ffffff; padding-top: 8px;">
                  Rule Met
                </div>
              </div>
            </div>
  </div>
</div>

Answer 1

你的 jquery 有问题。我已经修复它并添加了下面的代码。

$('.decNode').each(function (e) {
  if ($(this).css('border-color') == 'rgb(0, 0, 255)') {
     console.log('There is a decNode with blue border');
     $('div[id*=RulesBox]').each(function () {                            console.log($(this).css('border-width'));
       if ($(this).css('border-width') == '3px') {
         console.log('There is a RulesBox with blue border');
         $('.decNodeHeader h2').append(' - <span style="color:red;">RULES NOT MET</span>');
       }
       else {
         
       }                   
     });
    
                    
   }
   else {
            //console.log('No decNode with a border');
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="DecNode3011" class="decNode draggable ui-draggable" style="border:3px solid rgb(0, 0, 255);"">
  <div class="decNodeHeader">
    <div style="padding: 12px 12px 0px 12px;"><h2>Div Header Text</h2></div>
  </div>
  <div>
    <div id="RulesContainer7493">
              <div id="RuleSet233105">
                <div id="RulesBox233105" style="border: 1px solid #999999; background-color: #ffffff; padding-top: 8px;">
                  Rule Not Met
                </div>
              </div>
              <div id="RuleSet233106">
                <div id="RulesBox233106" style="border: 3px solid #0000FF; background-color: #ffffff; padding-top: 8px;">
                  Rule Met
                </div>
              </div>
            </div>
  </div>
</div>