jQuery проверить, если div пуст после templating

Question

Я ищу, если div пуст, и мой код работает, если div выглядит так, без пробела, но я использую Smarty и хочу показывать данные, если он доступен. Если класс highlights пуст, я хочу хорошо показать 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); 
}); 

Answer 1

Попробуйте это,

Шаблон

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

    </div> 
{/if} 

Jquery

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

Else вы можете choose any one от How to check if div element is empty

Answer 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; 
}