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

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。

- murday1983

Answer 1

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

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

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

这是一个工作演示链接。

- Radonirina Maminiaina

---

这个方法很好用，虽然我决定把我的字段标签放回到我的CMS中，以减少一行代码，并将“label”更改为“div”，并用[!RollNumber]替换了== ""。 - murday1983

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();
        }
    }
});

基本上我在做的是检查所有行的子元素，如果两个都为空，则隐藏该行。

希望能帮到你！

- gon250

---

@murday1983看一下这个例子，我认为它是你正在寻找的。还要注意行的id，不可以为每一行重复使用相同的id。“rollNumber”。 - gon250

Answer 3

使用CSS的display样式属性来隐藏行。

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

- Hardy

---

你能给我一个例子吗？ - murday1983

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');
  }
});

- Aleksi