4

使用 Bootstrap 和 JavaScript，我将它用作手风琴格式 - 一旦单击折叠div，它将打开并显示div基于 id 中的项目。

问题：

如果div不包含任何我希望它打开并向用户显示消息的项目：

"no items here"

我该怎么做呢？在 JavaScript 中？

这就是我所拥有的：

看法

<div class="accordion-body collapse state-loading" data-group-id="13" data-bind="attr: { 'id': 'GroupMember_' + Id(), 'data-type-id': ModelId() }" id="GroupMember_15" data-type-id="15">
      <div class="accordion-inner no_border" data-bind="foreach: Children"></div><!--END: accordion-inner--></div>
</div>

如果我希望它打开并显示以下文本Children：0No items here

Javascript：

OnSuccess: function (data) {
                var _groups = linq.From(options.groupData);    
                var _groupsToUpdate = _groups .Where(function (x) { return x.Id == options.groupId; });
                if (_groupsToUpdate.Any()) {
                    _groupsToUpdate.First().Children = data.Items;                  
                }

不确定我是否缺少其他要分享的内容 - 让我知道。

更新

分区布局：

<div class='accordion-group'>
     <div class='accordion-heading'> Group 1 </div>
     <div class='accordion-body'>
          <div class='accordion-inner'> 
              <div class='element'>No items here</div> 
          </div>
     </div>
</div>

我必须单击“手风琴标题”类才能显示“手风琴正文”并进入accordion-inner项目

4

2 回答 2

2

你需要绑定到show手风琴元素上的事件并在那里执行你的检查，从你的类我假设你使用 Bootstrap v2.3.2：

$('.accordion .collapse').on('show', function () {
    var $inner = $(this).find('.accordion-inner');
    if($inner.is(':empty')){
        $inner.html('No items here');
    }   
});

演示小提琴

Note that the :empty selector is very picky, it will not work if there's any white space between the opening and closing tags of .accordion-inner.

You may also use if(!$.trim($inner.html())) to check if the element is empty or as @JL suggested check the length of the children elements just beware that text nodes are not treated like children, so a div with only text would be considered empty

于 2013-08-19T05:35:35.133 回答
1

你有安装 jQuery 吗？您可以检查 a<div>是否有这样的孩子：

if ($('#divId').children().length == 0) {
     $('#divId').append("no items here");
}

如果你没有 jQuery：

if (!document.getElementById('divId').hasChildNodes()) {
    document.getElementById('divId').innerHTML = "no items here";
}

根据您的编辑，我认为我们正在检查accordian-inner儿童。如果是这样，给它一个 ID 并将其替换到我们的代码中。注意：您不需要<div>包含我们的“无项目”消息...该消息将使用 javascript 打印（另外，如果您有一个<div>，那么您实际上添加了一个孩子并且该消息不再适用）。将您的 HTML 更改为：

<div class='accordion-group'>
     <div class='accordion-heading'> Group 1 </div>
     <div class='accordion-body'>
          <div id='innerId' class='accordion-inner'> 
              <!-- Remove the 'element' div -->
          </div>
     </div>
</div>

然后：

if (!document.getElementById('innerId').hasChildNodes()) {
    document.getElementById('innerId').innerHTML = "no items here";
}
于 2013-08-19T03:02:55.700 回答