0

次の情報を含む住所を表示しようとしています: タイトル、部門、住所 1、住所 2、町/都道府県/郵便番号、および国 (5 行分のデータ)。問題は、会社がタイトル、住所 1、および町/都道府県/郵便番号のみを持っている場合もあれば、住所 2 以外のすべてを持っている場合もあります。これは、データベース レコード リクエストのサーバー側で決定されます。したがって、一部のラベルが空白になる場合、出力を適切に表示するにはどうすればよいですか? 空のスパンを含む div を本質的に折りたたんだり削除したりしたいと思います。 jquery とセレクターを使用して空白のスパンを持つすべての div を検索し (それがすべて asp.net ラベルであるため)、それらの div を削除する方法についての私の唯一のアイデアでしたが、これは非常に悪い形式のように思えます。cssでこれを行う方法はありますか? 可能なコードは次のようになります: $('span:empty:only-child').parent('div').remove();

写真の例(スペーシング/インデントの問題は無視してください。修正します)

Division、Address2、および Country がありません

Division、Address2、および Country がありません

すべての可能なフィールド

すべての可能なフィールド

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

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 に答える
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 に答える
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 に答える