jQuery检查模板后div是否为空

时间:2014-01-03 13:01:12

标签: javascript jquery

我正在寻找一个div是否为空并且如果div看起来没有空格我的代码是有效的,但是我正在使用Smarty并且想要显示数据是否可用。如果高亮类是空的,那么我想很好地显示no_highlights。

如果它有助于在高亮显示中出现的唯一内容是<div class="form-group"> <!-- different content --> </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);
});

2 个答案:

答案 0 :(得分:0)

试试这个,

<强>模板

{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 empty

choose any one

答案 1 :(得分:0)

要检查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;
}