寻找缺少子元素的元素
Vanilla JS Find Element with Missing Child Element
我试图得到一个布尔值,让我知道如果父元素有子元素。以下是一些约束条件:
- 可以有x个这样的"盒子"
- 检查并查看是否有任何具有页脚元素的框
-
如果框没有页脚元素,添加一个类
<div class="data-trend"> <header></header> <div class="main"></div> <footer></footer> </div>
<div class="data-trend"> <header></header> <div class="main"></div> <footer></footer> </div>
<div class="data-trend"> <header></header> <div class="main"> <span class="glyphicons"><span> <!-- On the glyphicons I would add class if there is no footer --> </div> <!-- notice no footer --> </div>
将上述注释移动到实际答案中:
var elems = document.querySelectorAll('.data-trend'),
len = elems.length,
i = -1
while(++i < len) {
if(!elems[i].querySelector('footer')) elems[i].classList.add('no-footer')
}
.no-footer { border: 3px solid blue; }
<div class="data-trend">
<header>Testing</header>
<div class="main"></div>
<footer>Footer</footer>
</div>
<div class="data-trend">
<header>Testing</header>
<div class="main"></div>
<footer>Footer</footer>
</div>
<div class="data-trend">
<header>Testing</header>
<div class="main">
<span class="glyphicons"><span>
</div>
</div>
如果您在香草中做了很多这样的事情,那么为自己定义一个forEach
辅助函数是有意义的
function forEach(elems, fn){
var len = elems.length,
i = -1
while(++i < len) {
fn(elems[i])
}
}
相关文章:
- CKEditor Widget-阻止编辑可编辑元素本身
- 如何设置html元素填充的动画
- 如何将HTML id分配给元素,以及如何将JavaScript应用于元素
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- 使用clickToggle并在单击另一个元素时关闭元素
- 单击时将焦点更改为元素
- 正在寻找比$(document).ready慢的$(window).load的替代方案
- 表追加而不附加最后一个元素
- jQuery和选择器:我如何确保确实存在我正在寻找的元素
- 处理 DOM 元素,寻找下一个类
- 在 JavaScript 中寻找具有特定深度的元素
- 寻找什么事件..更改视频元素的当前时间时
- 从输入文本中寻找关于下拉元素的 javascript 插件
- 寻找HTML5音频元素会导致延迟(中断同步)
- 寻找支持svg元素绑定的js框架
- 在adobedtm数据元素中寻找自定义脚本
- 寻找将DOM值拉入Custom Script Adobe DTM数据元素的示例逻辑
- jQuery .data(),需要接受数组元素作为键或寻找替代(JSON?)
- 寻找缺少子元素的元素
- 在跨度元素中寻找锚点