jQuery在模板化后检查div是否为空答案

【问题标题】：jQuery check if div is empty after templatingjQuery在模板化后检查div是否为空
【发布时间】：2014-01-03 21:16:11
【问题描述】：

我正在查看 div 是否为空，如果 div 看起来像这样没有空格，我的代码是否有效，但我正在使用 Smarty 并希望显示可用的数据。如果 highlight 类是空的，那么我想很好地显示 no_highlights。

如果有帮助，将出现在突出显示中的唯一内容是<div class="form-group">  </div>

<div class="highlights">
    {if $highlights}
    {/if}
</div>
<a href="#" class="pull-right showhouse-text" id="add_highlight"><i class="fa fa-plus"></i> Add Highlight</a> <br>
<div class="well no_highlights">
    <h4>No highlights found</h4>
    <p>You have not yet added any highlights to this property</p>
    <p><button type="button" class="btn btn-primary first_highlight">Add first property highlight</button></p>
</div>

var highlight = '<div class="form-group">       <label for="highlight" class="col-sm-3 col-lg-2 control-label">Highlight:</label>       <div class="col-sm-9 col-lg-3 controls">            <input type="text" name="highlight_name[]" data-rule-required="true" class="form-control" placeholder="Highlight Name">     </div>      <div class="col-sm-9 col-lg-7 controls">            <textarea name="highlight_description[]" class="form-control" rows="3" placeholder="Description for highlight"></textarea>          <a href="#" class="pull-right showhouse-text remove_highlight"><i class="fa fa-plus"></i> Remove Highlight</a>      </div>  </div>';
if(('.highlights')){
    $('#add_highlight').hide();
    $('#order_highlights').hide();
}else{
    $('.no_highlights').hide();
}

$('.first_highlight').click(function(){
    $('.no_highlights').hide();
    $('#add_highlight').show();
    $('#order_highlights').show();  
    $('.highlights').append(highlight);
});

$('#add_highlight').click(function(){
    $('.highlights').append(highlight);
});

【问题讨论】：

为什么不将div 放在if 语句中？
我需要 if 语句之外的 div 以便我可以附加表单字段。在编辑中添加它

标签： javascript jquery

【解决方案1】：

试试这个，

模板

{if $highlights}
    <div class="highlights">

    </div>
{/if}

jQuery

if(! $('.highlights').length){
    $('#add_highlight').hide();
    $('#order_highlights').hide();
}else{
    $('.no_highlights').hide();
}

否则您可以从How to check if div element is emptychoose any one

【讨论】：

我需要 if 语句之外的 div 以便我可以附加表单字段。

【解决方案2】：

要检查 div 元素是否为空，请参阅 here

或者你应该检查模板本身

<div class="highlights">
  {if $highlights}
  {/if}
</div>
<a href="#" class="pull-right showhouse-text {if $highlights}{else}hidden{/if}" id="add_highlight">
  <i class="fa fa-plus"></i>Add Highlight
</a> <br>
<div class="well no_highlights {if $highlights}hidden{/if}">
  <h4>No highlights found</h4>
  <p>You have not yet added any highlights to this property</p>
  <p><button type="button" class="btn btn-primary first_highlight">Add first property highlight</button></p>
</div>

CSS：

.hidden{
 display: none;
}

【讨论】：