CODEWITHSUNDEEP
jqueryhtmlcss
Aaron
Aaron

Reputation: 545

jQuery If border color and if border width =

I am trying to loop through several divs and find the ones with a blue blue border around them. Then IF that div has a blue border look to see if it contains any divs with a blue border or border width of 3px. If the main div has a blue border but no divs with a blue border or border wdth of 3px append some text.

My jQuery is working to find the main div with the blue border but not finding the divs inside that have a blue border or border width of 3px.

This is my 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');
        }

My HTML is like this

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

Upvotes: 0

Views: 115

Answers (2)

Souleste
Souleste

Reputation: 1984

Put the children of .decNode in a .each() function.

Also, one of your div tags had an extra ( " )

$('.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>

Upvotes: 1

Ayushi Sood
Ayushi Sood

Reputation: 111

There is a problem in your jquery. I've fixed it and added the code below.

$('.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>

Upvotes: 2

Related Questions