2013-12-20 3 views
0

Я искал разные способы скрыть родительский div, если дочерний div пуст от содержимого, у меня есть работа в некоторых скриптах, но ничего не работает мой фактический сайт.скрыть родительский div, если дочерний div пуст от html

Я редактирую плагин Wordpress CPT Bootstrap carousel, я добавил новое настраиваемое поле для отображения отзывов, но в настоящее время получил только один отзыв от клиента, поэтому хочу скрыть кнопку, когда div является emtpy.

Вот ссылка на страницу: http://rookdesigns.co.uk/portfolio/

и вот мой HTML и JQuery:

<div class="test btn btn-primary">Testimonials>> 
    <div class="carousel-quotes"> 
     <?php echo $image[ 'reff']; ?> 
    </div> 
</div> 



jQuery(".carousel-quotes:empty").parent().hide(); 

Я также использую этот кусок JQuery для fadeToggle ребенка DIV и выключаться

jQuery(".test").click(function(){ 
jQuery('.carousel-quotes').fadeToggle(); 

Не уверен, что это может произойти.

Любая помощь с этим очень ценится,

Заранее спасибо

Все лучшее

Гарри

+0

если 'div' пуст в любом случае ... почему вы хотите скрыть это ???? – NoobEditor

+0

@Mayank: Скрыть * родительский * (в котором есть другие вещи). –

+0

Привет, причина, по которой я хочу скрыть это, потому что он имеет цвет фона синего –

ответ

1

:empty не работает, потому что есть текстовый узел.

Вы можете либо изменить PHP, так что нет никаких пробелов внутри div, когда он пуст, или вы можете использовать filter:

jQuery(".carousel-quotes").filter(function() { 
    return !$.trim($(this).text()); 
}).parent().hide(); 

Или на самом деле, для конкретного случая использования, мы можем избежать вызова $() и text() в функции фильтра:

jQuery(".carousel-quotes").filter(function() { 
    return !$.trim(this.innerHTML); 
}).parent().hide(); 
+0

Спасибо TJ Crowder, просто попробовал это, к сожалению, безрезультатно, но интересно узнать о whitesapce, может быть, я должен попытаться избавиться от этого вместо этого. –

+0

@HarryRook: Выше * работает *: http://jsbin.com/IpuMAxif/1 (Это использует только 'setTimeout', чтобы дать вам возможность увидеть, что скрывается, [здесь версия без' setTimeout'] (http://jsbin.com/IpuMAxif/2).) Возможно, вы используете код перед существуют соответствующие элементы? Поместите скрипт в нижней части HTML, непосредственно перед закрывающим тегом '' или (если вы не контролируете, где идет скрипт), используйте 'ready' для jQuery для планирования обратного вызова DOM. –

0

если JavaScript является приемлемым решением вами, этот фрагмент должен работать:

Работа DEMO

JS

 var ln = $.trim($('.carousel-quotes').text()); /* trim is important here to remove any white space inside the div */ 
     if (ln.length === 0) 
     { 
      $('.test').hide(); 
     } 

EDIT

есть ошибка JS в вашей страницы, которые могут быть причиной проблемы:

'fadeSpeed'  : 2000, 
'targetHeight' : 100% 
'effect'  : 'effect-6' 
'direction'  : 'vertical' 

, является ми ssing в вышеуказанных значениях,

'fadeSpeed'  : 2000, 
'targetHeight' : 100%, 
'effect'  : 'effect-6', 
'direction'  : 'vertical' 

проверить, работает ли оно после его исправления!

+0

Хороший, но, к сожалению, он не работает на моем сайте, и я не могу понять, почему оба варианта работают в pastebin и скрипке, но в тот момент, когда они добавлены на мой сайт, ничего. Возможно, это связано с тем, что содержимое div создается tinymce textarea, я не уверен, как это повлияет на все. Спасибо за вашу помощь до сих пор ребята –

+0

вы можете указать URL-адрес своего сайта? – NoobEditor

+0

приветствия здесь: http://rookdesigns.co.uk/portfolio/ –

Смежные вопросы