As I navigate through multiple divs, my goal is to identify those with a distinct blue border. Furthermore, if a main div possesses a blue border, I need to check for any inner divs that also have a blue border or a border width of 3px. If the main div has a blue border but lacks any inner divs meeting these criteria, I want to add some text dynamically.
Although my jQuery code successfully detects the main div with the blue border, it struggles to pinpoint inner divs with similar styling.
Here is the jQuery snippet I am using:
$('.decNode').each(function (e) {
if ($(this).css('border-color') == 'rgb(0, 0, 255)') {
console.log('There is a decNode with a 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 a blue border');
$(this).find('.decNodeHeader h2').append(' - <span style="color:red;">RULES NOT MET</span>');
}
else {
}
}
else {
//console.log('No decNode with a border');
}
The structure of my HTML content looks 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>