Question

我觉得这个问题有点愚蠢，但出于某种原因，我不能为我的生活思考如何做我想做的事。

我有一个<div class="row">，其中包含我的字段标签和字段。

如果我的字段值返回为空，我想完全隐藏此行。

HTML（在我的CMS系统中保存）：

<div id="rollNumber" class="row">
     <label class="col-sm-offset-2 col-sm-3 control-label">[!RollNumberLabel]</label>
     <div class="col-sm-2 form-control-static">[!RollNumber]</div>
</div>

查看代码：

if (newBankdetails.RollNumber != null && newBankdetails.RollNumber != "")
{
     template.Nvc.Add("[!RollNumberLabel]", "Roll number");
     template.Nvc.Add("[!RollNumber]", newBankdetails.RollNumber);
}

我尝试过：

template.Nvc.Add("[!RollNumberLabel]", "");
template.Nvc.Add("[!RollNumber]", "");

但这会在此行上方和下方的行之间添加空白区域。

我是否有任何建议，无论是JavaScript，JQuery，CSS还是可以使用HTML（尽管我不认为可以通过这种方式完成）。

我无法在CMS中添加任何代码，因此需要在我的代码中完成。

我的网站正在使用Twitter Bootstrap

Answer 1

您可以测试标签文本是否为空。

$(function() {
    $(".row").each(function() {
        if ($("label", this).text() == "" ) {
            $(this).hide();
        }
    });
});

工作演示： http://jsfiddle.net/m7nytbw4/

Answer 2

我为您创建了一个示例http://jsfiddle.net/gon250/x8m6jLLo/

$(".row").each(function(){
    var $row = $(this);
    var $childern = $row.children();
    if($childern.length > 1) {
     if($childern[0].innerText === "" && $childern[1].innerText === "") {
            $row.hide();
        }
    }
});

基本上我正在做的是检查所有行的子节点，如果两者都是空的，则隐藏该行。

希望它有所帮助！

Answer 3

使用CSS显示样式属性隐藏行。

$("#rollNumber").css("display", "none");

Answer 4

我不确定这是否是针对您的问题的过度解决方案，但使用jQuery和正则表达式，您可以执行以下操作：

$('.row').each(function(){
  var row = $(this);
  if(! /^[a-zA-Z0-9]+$/.test(row.find('label'))){
    // No alphabetical characters found
    row.css('display','none');
  }
});

如果返回的值为空，则隐藏行

4 个答案: