當跨度不包含內容時隱藏父項

Question

我一直在網站上和各種與此相關的問題，我無法找到一個解決方案。

我試圖隱藏我的父母格「行」每當我跨越「specvalue」不包含任何數據

<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嗎？我發現它適用於其他示例，但不適用於此。

Answer 1

我已刪除重複的id="row"並用class="specvalue"替換id="specvalue"。然後用一些簡單的jquery，我隱藏了所有具有空specvalue的行。

注意：始終保留在民德編號的總是必須在完整的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的所有是對每種類型元素的相同 - 不這樣做！一旦你有固定的，你需要使用類的選擇，然後你可以做這樣的事情在jQuery的：

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

這則檢查與類行的每個元素，如果沒有內容，它會獲取父元素並隱藏它。

Answer 3

你可以在CSS中做到這一點，你的問題是你使用相同的id屬性爲每個span。對於整個文檔，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(); 
    } 
});