Question

我正在尝试遍历几个div，并在其周围找到带有蓝蓝色边框的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

将.decNode的子代放入.each()函数中。

另外，您的div标签之一有一个额外的（“）

$('.decNode').each(function(e) {
  var headTxt = $(this).find('h2');
  var ruleMet = '<span class="met" style="color: green;"> - RULES MET</span>';
  var ruleNotMet = '<span class="not-met" style="color: red;"> - RULES NOT MET</span>';
  if ($(this).css('border-color') == 'rgb(0, 0, 255)') {
    console.log('There is a decNode with blue border');
    $(this).find('div[id*=RulesBox]').each(function() {
      console.log($(this).css('border-width'));
      if ($(this).css('border-width') == '3px') {
        $(this).css('border-color', 'red');
        headTxt.append(ruleMet);
        console.log('true');
      } else {
      headTxt.append(ruleNotMet);
        console.log('false');
      }
    });
  } else {
    //console.log('No decNode with a border');
  }
  if (headTxt.find('span').hasClass('met') || headTxt.find('span').length > 1) {
  	headTxt.find('.not-met:first').remove();
  }
});

span {
  content: '';
}

<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>

Answer 2

您的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>

jQuery If边框颜色和if边框宽度=

2 个答案: