Fatal编程技术网
  • javascript/
  • Javascript 当跨距不包含内容时隐藏父级

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

javascript jquery html css

Javascript 当跨距不包含内容时隐藏父级,javascript,jquery,html,css,is-empty,Javascript,Jquery,Html,Css,Is Empty,我在网站上走来走去，问了很多与此相关的问题，我找不到解决办法 每当span“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><di

我在网站上走来走去，问了很多与此相关的问题，我找不到解决办法

每当span“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>
这让我一事无成，jquery也是如此

$("#specvalue:empty").parent().hide();
到目前为止还没有任何效果，我甚至试着将脚本放在
标记中，甚至在调用技术文档后放在下面

你认为我需要更具体地使用CSS吗？我发现它适用于其他示例，但不适用于此。

我删除了重复的
id=“row”
，并将
id=“specvalue”
替换为
class=“specvalue”
。然后，通过一些简单的jquery，我隐藏了specvalue为空的所有行

注意：始终记住id的始终在整个html页面中必须是唯一的

$（'.specvalue'）。每个（函数（i，v）{
如果（$（this.html（）=''）{
$（this）.closest（'.row'）.hide（）；
}
});


精确
A.
驱动类型
自由速度
B RPM

我删除了重复的
id=“row”
并将
id=“specvalue”
替换为
class=“specvalue”
。然后，通过一些简单的jquery，我隐藏了specvalue为空的所有行

注意：始终记住id的始终在整个html页面中必须是唯一的



$（'.specvalue'）。每个（函数（i，v）{
如果（$（this.html（）=''）{
$（this）.closest（'.row'）.hide（）；
}
});


精确
A.
驱动类型
自由速度
B RPM

对于每种类型的元素，您的所有ID都是相同的-不要这样做！一旦解决了这个问题，您将需要使用类作为选择器，然后您可以在jQuery中执行如下操作：


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



然后用类行检查每个元素，如果它没有内容，则获取该元素的父元素并将其隐藏。
对于每种类型的元素，所有ID都是相同的-不要这样做！一旦解决了这个问题，您将需要使用类作为选择器，然后您可以在jQuery中执行如下操作：


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



然后用类行检查每个元素，如果它没有内容，它将获取该元素的父元素并将其隐藏。
您可以在CSS中执行此操作，您的问题是您对每个
span
使用相同的
id
属性。
id
对于整个文档（）必须是唯一的。像这样使用
类
：


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



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


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



就像你在评论中说的：ID是唯一的，所以使用类

以下是您的解决方案：

HTML:


就像你在评论中说的：ID是唯一的，所以使用类

以下是您的解决方案：

HTML:


首先，ID必须是唯一的。。您不能有多个ID
行
或
specvalue
首先，ID必须是唯一的。。您不能有多个ID
行
或
specvalue
WOW！成功了！最初我有.specvalue和.row-它仍然没有做任何事情。我可以使用.remove（）而不是使用.hide（）？原因是，我正在对div进行编码，使其以条纹模式显示。通过隐藏规格，我得到了不一致。编辑：我刚刚解决了我自己的问题这确实有效！！哇！成功了！最初我有.specvalue和.row-它仍然没有做任何事情。我可以使用.remove（）而不是使用.hide（）？原因是，我正在对div进行编码，使其以条纹模式显示。通过隐藏规格，我得到了不一致。编辑：我刚刚解决了我自己的问题这确实有效！！

<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>



var rows = $('#itmSpecsTbl .row');

$.each(rows, function(i, e){
    if($(e).find('.specvalue').text() === ''){
    $(e).hide();
  }
});