当范围不包含任何内容时隐藏父项
hiding parent when a span contains no content
我一直在网站上上下下,并与之相关的各种问题,我找不到解决方案。
每当我的跨度"specvalue"不包含数据时,我都会尝试隐藏我的父div"行"
<div class="container-fluid" id="itmSpecsTbl">
<div class="row" id="row"><div class="col-xs-6" align="left"><b>Accuracy</b> </div><div class="col-xs-6" align="right"><span id="specvalue"><%=getAttribute('item','127559','custitem1','')%></span> </div></div>
<div class="row" id="row"><div class="col-xs-6" align="left"><b>Drive Type</b> </div><div class="col-xs-6" align="right"><span id="specvalue"><%=getAttribute('item','127559','custitem2','')%></span> </div></div>
<div class="row" id="row"><div class="col-xs-6" align="left"><b>Free Speed</b> </div><div class="col-xs-6" align="right"><span id="specvalue"><%=getAttribute('item','127559','custitem4','')%></span> RPM</div></div>
<div class="row" id="row"><div class="col-xs-6" align="left"><b>Increments</b> </div><div class="col-xs-6" align="right"><span id="specvalue"><%=getAttribute('item','127559','custitem5','')%></span> </div></div>
<div class="row" id="row"><div class="col-xs-6" align="left"><b>Length</b> </div><div class="col-xs-6" align="right"><span id="specvalue"><%=getAttribute('item','127559','custitem6','')%></span> In</div></div>
<div class="row" id="row"><div class="col-xs-6" align="left"><b>Length</b> </div><div class="col-xs-6" align="right"><span id="specvalue"><%=getAttribute('item','127559','custitem7','')%></span> mm</div></div>
<div class="row" id="row"><div class="col-xs-6" align="left"><b>Max Air Consumption</b> </div><div class="col-xs-6" align="right"><span id="specvalue"><%=getAttribute('item','127559','custitem8','')%></span> </div></div>
<div class="row" id="row"><div class="col-xs-6" align="left"><b>Air Inlet (NPT)</b> </div><div class="col-xs-6" align="right"><span id="specvalue"><%=getAttribute('item','127559','custitem37','')%></span> </div></div>
<div class="row" id="row"><div class="col-xs-6" align="left"><b>Min Torque</b> </div><div class="col-xs-6" align="right"><span id="specvalue"><%=getAttribute('item','127559','custitem9','')%></span> ft lb</div></div>
<div class="row" id="row"><div class="col-xs-6" align="left"><b>Max Torque</b> </div><div class="col-xs-6" align="right"><span id="specvalue"><%=getAttribute('item','127559','custitem10','')%></span> ft lb</div></div>
<div class="row" id="row"><div class="col-xs-6" align="left"><b>Min Torque</b> </div><div class="col-xs-6" align="right"><span id="specvalue"><%=getAttribute('item','127559','custitem11','')%></span> in lb</div></div>
<div class="row" id="row"><div class="col-xs-6" align="left"><b>Max Torque</b> </div><div class="col-xs-6" align="right"><span id="specvalue"><%=getAttribute('item','127559','custitem12','')%></span> in lb</div></div>
<div class="row" id="row"><div class="col-xs-6" align="left"><b>Min Torque</b> </div><div class="col-xs-6" align="right"><span id="specvalue"><%=getAttribute('item','127559','custitem13','')%></span> in oz</div></div>
<div class="row" id="row"><div class="col-xs-6" align="left"><b>Max Torque</b> </div><div class="col-xs-6" align="right"><span id="specvalue"><%=getAttribute('item','127559','custitem14','')%></span> in oz</div></div>
<div class="row" id="row"><div class="col-xs-6" align="left"><b>Min Torque</b> </div><div class="col-xs-6" align="right"><span id="specvalue"><%=getAttribute('item','127559','custitem15','')%></span> kgf cm</div></div>
<div class="row" id="row"><div class="col-xs-6" align="left"><b>Max Torque</b> </div><div class="col-xs-6" align="right"><span id="specvalue"><%=getAttribute('item','127559','custitem16','')%></span> kgf cm</div></div>
<div class="row" id="row"><div class="col-xs-6" align="left"><b>Capacity</b> </div><div class="col-xs-6" align="right"><span id="specvalue"><%=getAttribute('item','127559','custitemfi0073','')%></span> lbs</div></div>
<div class="row" id="row"><div class="col-xs-6" align="left"><b>Min Reach</b> </div><div class="col-xs-6" align="right"><span id="specvalue"><%=getAttribute('item','127559','custitemfi0103','')%></span> in</div></div>
<div class="row" id="row"><div class="col-xs-6" align="left"><b>Max Reach</b> </div><div class="col-xs-6" align="right"><span id="specvalue"><%=getAttribute('item','127559','custitemfi0104','')%></span> in</div></div>
</div>
"getAttribute"用于在没有数据时提取我的项目的数据。 它是空白的 - 没有空格,什么都没有。
我试过使用 :空, :空白
#specvalue:empty #row, #specvalue:blank #row { display: none; }
这让我一无所获,与jquery相同
$("#specvalue:empty").parent().hide();
到目前为止没有任何效果,我什至尝试将脚本放在 <head>
标签内,甚至在调用技术文档后放在下面。
你认为我需要更具体地使用 CSS 吗?我看到它适用于其他示例,但不适用于此。
我已经删除了重复的id="row"
并将id="specvalue"
替换为class="specvalue"
。然后通过一些简单的jquery,我隐藏了所有具有空specvalue的行。
注意:始终牢记ID在整个html页面中始终必须是唯一的!
$('.specvalue').each(function(i, v) {
if ($(this).html() === '') {
$(this).closest('.row').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" id="itmSpecsTbl">
<div class="row">
<div class="col-xs-6" align="left"><b>Accuracy</b>
</div>
<div class="col-xs-6" align="right"><span class="specvalue">A</span>
</div>
</div>
<div class="row">
<div class="col-xs-6" align="left"><b>Drive Type</b>
</div>
<div class="col-xs-6" align="right"><span class="specvalue"></span>
</div>
</div>
<div class="row">
<div class="col-xs-6" align="left"><b>Free Speed</b>
</div>
<div class="col-xs-6" align="right"><span class="specvalue">B</span> RPM</div>
</div>
</div>
每种类型的元素,您的所有 ID 都是相同的 - 不要这样做!一旦你解决了这个问题,你就需要使用类作为选择器,然后你可以在jQuery中做这样的事情:
if ($('.row').is(':empty')){
$(this).parent()hide().
}
然后,这会使用类行检查每个元素,如果它没有内容,它将获取该元素父级并将其隐藏。
所以就像在你的评论中已经说过的那样:ID 是唯一的,所以使用类。
这是您的解决方案:JSFiddle
.HTML:
<div class="container-fluid" id="itmSpecsTbl">
<div class="row">
<div class="col-xs-6" align="left">
<b>Accuracy</b>
</div>
<div class="col-xs-6" align="right">
<span class="specvalue"></span>
</div>
</div>
<div class="row">
<div class="col-xs-6" align="left">
<b>Drive Type</b>
</div>
<div class="col-xs-6" align="right">
<span class="specvalue"></span>
</div>
</div>
<div class="row">
<div class="col-xs-6" align="left">
<b>Free Speed</b>
</div>
<div class="col-xs-6" align="right">
<span class="specvalue">RPM</span>
</div>
</div>
<div class="row">
<div class="col-xs-6" align="left">
<b>Increments</b>
</div>
<div class="col-xs-6" align="right">
<span class="specvalue"></span>
</div>
</div>
</div>
Js:
var rows = $('#itmSpecsTbl .row');
$.each(rows, function(i, e){
if($(e).find('.specvalue').text() === ''){
$(e).hide();
}
});
您可以在
CSS中执行此操作,您的问题是您对每个span
使用相同的id
属性。对于整个文档,id
必须是唯一的(请参阅此处)。请改用如下所示的class
:
<span class="specvalue"><%=getAttribute('item','127559','custitem1','')%></span>
和 CSS:
.specvalue:empty {
display: none;
}
相关文章:
- 显示放大镜弹出窗口时隐藏导航内容
- 使用jQuery选项卡来显示或隐藏其他内容
- 如何使用Javascript替换和隐藏Div内容
- 如何在网页加载时显示加载内容,并在页面完全加载时隐藏此内容
- 只有当类是硬编码的时,才可以使用jQuery来显示/隐藏html内容
- 向IE8用户隐藏所有内容的最佳方式是什么
- 使用 while 循环时显示隐藏的内容
- 如何从菜单中预加载html链接并使用javascript隐藏/显示内容
- 如何创建指向显示/隐藏javascript隐藏的内容的链接
- 根据选定的复选框隐藏/显示内容
- jQuery.ScrollTo 插件在隐藏/显示内容时出现问题
- jQuery 在刷新时显示隐藏的内容
- 单击可隐藏其他内容
- jQuery滚动显示隐藏的内容
- 根据选中或取消选中表单框来隐藏/显示内容:这只能用css完成吗
- 是否可以使用JavaScript或jQuery显示/隐藏html内容
- 使用CSS或Java显示或隐藏空内容区域
- 基于多个URL隐藏/显示内容
- 通过单击foreach循环来显示/隐藏xml内容
- 隐藏的内容仍在后台运行