jquery - jQuery 如果边框颜色和边框宽度 =
问题描述
我正在尝试遍历几个 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>
解决方案
你的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>
推荐阅读
- python - Gunicorn 自行运行,但不在 docker 容器中运行
- laravel - 如何在共享虚拟主机中部署 laravel 项目?
- javascript - 如何在 Firefox for Android 上为视频创建缩略图
- node.js - 为什么我的 Mongoose 模型在传递集合名称后仍返回空白响应?
- c++ - C++ Linked List Implementation accessing data
- html - Postion: absolute;
- html - Font awesome icon is moving outside of its parent container with position:absolute
- bash - 在openjdk apline docker容器中找不到garmin connectciq-sdk ommand monkeyc
- tensorflow - 如何解决保存和恢复 Keras LSTM 模型错误
- html - webpack4 不编译所有 html 文件?