0

我正在尝试显示一个包含以下信息的地址：标题、部门、地址 1、地址 2、城镇/州/邮政编码和国家/地区（5 个单独的数据行）。问题是有时公司可能只有标题、地址 1 和城镇/州/邮编，而其他时候可能只有地址 2。这是在数据库记录请求服务器端确定的。因此，当我的某些标签为空白时，如何使我的输出看起来正确？ 我希望包含空跨度的 div 基本上被折叠/删除。 我唯一的想法是如何使用 jquery 和选择器来查找所有具有空白跨度的 div（因为这实际上是一个 asp.net 标签），然后删除这些 div，但这似乎是一种糟糕的形式。有没有办法用css做到这一点？可能的代码类似于： $('span:empty:only-child').parent('div').remove();

图片示例（忽略我将修复的间距/缩进问题）

缺少部门、地址 2 和国家/地区

缺少部门、地址 2 和国家/地区

所有可能的字段

所有可能的字段

html

<asp:Label runat="server" ID="lblBillingAddressHeader" CssClass="lblBillingAddressHeader" Text="Billing Address:" />
<div style="position:relative; top:150px; left: 113px;">
    <div class="test">
      <asp:Label runat="server" ID="lblBillingDivision" CssClass="lblBillingShippingDivisionFont" />
    </div>
    <div class="test">
      <asp:Label runat="server" ID="lblBillingAddress" CssClass="lblBillingShippingFont" />
    </div>
    <div class="test">
      <asp:Label runat="server" ID="lblBillingAddress2" CssClass="lblBillingShippingFont" />
    </div>
    <div class="test">
      <asp:Label runat="server" ID="lblBillingAddress3" CssClass="lblBillingShippingFont" />
    </div>
    <div class="test">
      <asp:Label runat="server" ID="lblBillingAddress4" CssClass="lblBillingShippingFont" />
    </div>
</div>

CSS

.test {
    position: relative;
    top: 0px;
    left: 0px;
    height: 12px;
    width: 300px;
}

.lblBillingShippingDivisionFont {
    font-size: small;
    font-weight: bold;
}

.lblBillingShippingFont {
    font-size: 10.6px;
}
4

4 回答 4

2

jQuery代码： 

$(document).ready(function(){
        $('div').each(function() {
           if ($(this).find('span').text() == '') {
             $(this).hide();
           }
        });
      });

http://jsbin.com/axaxut/1/edit

于 2012-11-08T22:47:28.060 回答
2

你能重新构建你的 HTML 吗？

HTML

<div style="position:relative; top:150px; left: 113px;">
  <asp:Label runat="server" ID="lblBillingDivision" CssClass="lblBillingShippingDivisionFont" />
  <asp:Label runat="server" ID="lblBillingAddress" CssClass="lblBillingShippingFont" />
  <asp:Label runat="server" ID="lblBillingAddress2" CssClass="lblBillingShippingFont" />
  <asp:Label runat="server" ID="lblBillingAddress3" CssClass="lblBillingShippingFont" />
  <asp:Label runat="server" ID="lblBillingAddress4" CssClass="lblBillingShippingFont" />
</div>

CSS

.lblBillingShippingDivisionFont,
.lblBillingShippingFont {
    position: relative;
    top: 0px;
    left: 0px;
    width: 300px;
    display: block;
}

.lblBillingShippingDivisionFont {
    font-size: small;
    font-weight: bold;
}

.lblBillingShippingFont {
    font-size: 10.6px;
}

jsFiddle http://jsfiddle.net/LkFSV/

于 2012-11-08T22:52:52.133 回答
1

不幸的是，CSS 中没有父选择器。如果有，您可以执行以下操作：

span:empty:parent { display: none; }

您最好的选择是您已经拥有或在服务器端使用的 jQuery，我个人认为服务器端是您的最佳选择。

于 2012-11-08T22:43:31.390 回答
0

由于这是 asp.net 代码，因此您可以从服务器端代码检查 address2 是否为空并简单地隐藏控件。

if(string.IsNullOrEmpty(lblBillingAddress2.Text))
    lblBillingAddress2.Visible = false;
于 2012-11-08T22:47:59.933 回答