当跨度不包含内容时隐藏父级

Question

我一直在网站上下浏览以及与此相关的各种问题，我找不到解决方案。

每当我的跨度 "specvalue" 不包含任何数据时，我都会尝试隐藏我的父 div "row"

    <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" 用于在没有数据时拉取我的项目的数据。它是空白的 - 没有空格，什么都没有。

我试过使用 :empty, :blank

#specvalue:empty #row, #specvalue:blank #row { display: none; }

这让我无处可去，与 jquery

相同

$("#specvalue:empty").parent().hide();

到目前为止没有任何效果，我什至尝试将脚本放在 <head> 标记内，甚至在调用技术文档后放在下面。

您认为我需要更具体地说明 CSS 吗？我看到它适用于其他示例，但不适用于此。

Answer 1

我删除了重复的 id="row" 并将 id="specvalue" 替换为 class="specvalue"。然后用一些简单的 jquery 我隐藏了所有具有空规格值的行。

注意：始终牢记 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>

Answer 2

每种元素的所有 ID 都是相同的 - 不要那样做！一旦你解决了这个问题，你将需要使用 class 作为选择器，然后你可以在 jQuery:

中做这样的事情

if ($('.row').is(':empty')){
    $(this).parent()hide().
}

然后用 class 行检查每个元素，如果它没有内容，它获取该元素的父元素并隐藏它。

Answer 3

您可以在 CSS 中执行此操作，您的问题是您对每个 span 使用相同的 id 属性。 id 对于整个文档 (see this) 必须是唯一的。像这样使用 class：

<span class="specvalue"><%=getAttribute('item','127559','custitem1','')%></span>

和CSS：

.specvalue:empty {
    display: none;
}

Answer 4

就像您在评论中所说的那样：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();
  }
});

当跨度不包含内容时隐藏父级

hiding parent when a span contains no content

html

javascript

css

jquery

is-empty