Блог

Я хочу скрыть элемент, если элемент span внутри div не содержит текста

ниже приведен пример HTML

 <div class="showcase-caption" style="display: block;">
 <span> If this span has no text then i need to change the display property of outer div to none</span>
</div>
  

Ссылка на JsFiddle

Я пытался сделать это с помощью css, но это сработало не так, как ожидалось. поэтому я думаю, что jquery может работать лучше и обрабатывать старые браузеры.

В этом случае мне нужно изменить встроенное свойство, которое автоматически генерируется другим скриптом для отображения подписи к изображению для галереи изображений.

Обновление: Спасибо, ребята, за ваши ответы. Я выбираю решение ‘satpal’, поскольку оно короткое и дало мне точный результат.

Просто используйте :empty . Вам не нужен блок if.

 $('.showcase-caption span:empty').parent().hide()
  

ДЕМОНСТРАЦИЯ

Обновленная демонстрация

Используйте jQuery is() и :empty псевдоселектор.

 if( $('.showcase-caption span').is(':empty') ) {
    $('.showcase-caption').hide();
} 
  

Попробуйте использовать .is() along with :empty selector для выполнения вашей задачи,

 if($('.showcase-caption span').is(':empty')) { 
  

ДЕМОНСТРАЦИЯ

Полный код:

 var cache = $('.showcase-caption');
if($('span', cache).is(':empty')) {
  cache.hide();
} 
  

ДЕМОНСТРАЦИЯ

Или вы можете просто написать с помощью :has() селектора,

 $('.showcase-caption:has(span:empty)').hide();
  

ДЕМОНСТРАЦИЯ

 if($(".showcase-caption span").html().trim().length <= 0 ){
            $(".showcase-caption").hide();
}
  

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

 $(function){
    if($('.showcase-caption span').is(':empty')){
        $('.showcase-caption').css("display" , "none");
    }

    }