隐藏div元素(如果它为空)(ASP.NET MVC)

时间:2017-04-06 11:47:57

标签: javascript jquery html asp.net asp.net-mvc

我有像这样的ajax调用

  $('#display').click(function () {
        var vacancyId = $("#vacancy").val();
        var model = {
            vacancyId: vacancyId
    };

        $.ajax({
    url: '@Url.Action("QuestionBlocks", "Questions")',
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify(model),
    type: 'POST',
    dataType: 'json',
    processData: false,
    success: function (data) {
        var question1 = data[0]

        $(".list").append('<div style="width:80%;font-size:20px;margin-top:15px;border-style: solid;border-color:#ffcf00;border-radius: 5px;margin: 10px auto 0;;">' + question1.Question1 + '</div>' + '<div style="width:80%;font-size:20px;margin-top:15px;border-style: solid;border-color: #ffcf00;border-radius: 5px;margin: 10px auto 0;">' + question1.Question2 + '</div>' + '<div style="width:80%;font-size:20px;margin-top:15px;border-style: solid;border-color: #ffcf00;border-radius: 5px;margin: 10px auto 0;">' + question1.Question3 + '</div>' + '<div style="width:80%;font-size:20px;margin-top:15px;border-style: solid;border-color: #ffcf00;border-radius: 5px;margin: 10px auto 0;">' + question1.Question4 + '</div>' + '<div style="width:80%;font-size:20px;margin-top:15px;border-style: solid;border-color: #ffcf00;border-radius: 5px;margin: 10px auto 0;">' + question1.Question5 + '</div>' + '<div style="width:80%;font-size:20px;margin-top:15px;border-style: solid;border-color: #ffcf00;border-radius: 5px;margin: 10px auto 0;">' + question1.Question6 + '</div>' + '<div style="width:80%;font-size:20px;margin-top:15px;border-style: solid;border-color: #ffcf00;border-radius: 5px;margin: 10px auto 0;">' + question1.Question7 + '</div>' + '<div style="width:80%;font-size:20px;margin-top:15px;border-style: solid;border-color: #ffcf00;border-radius: 5px;margin: 10px auto 0;">' + question1.Question8 + '</div>' + '<div style="width:80%;font-size:20px;margin-top:15px;border-style: solid;border-color: #ffcf00;border-radius: 5px;margin: 10px auto 0;">' + question1.Question9 + '</div>' + '<div style="width:80%;font-size:20px;margin-top:15px;border-style: solid;border-color: #ffcf00;border-radius: 5px;margin: 10px auto 0;">' + question1.Question10 + '</div>');
        $(".list").find('div.section:empty').hide();
         }
    });
});

但是有些div是空的,因为来自后端的值为空。

我需要隐藏空divs

我试试这个$(".list").find('div.section:empty').hide();,但似乎行不通。

我在代码中写错了什么?

1 个答案:

答案 0 :(得分:1)

这可以使用javascript轻松完成。在这种方法中,您将获得所有div,检查它们是否为空并相应地隐藏它们。

var req = document.getElementsByClassName('list');
for(j=0; j<req.length; j++)
{
    var divs = req[j].innerHTML.getElementsByTagName('div');// got all the divs in the current element

    for(i=0; i<divs.length; i++)
    {
        if(divs[i].innerHTML == "")
        {
        divs[i].style.display = 'none';
        }
    }
}