Родитель не прячется, когда ребенок пуст (jQuery) (Wordpress) - PullRequest
0 голосов
/ 06 февраля 2020

Я пытаюсь скрыть родительский div, если дочерний div пуст. Тем не менее, кажется, что php в ребенке, заставляет его быть не пустым. Что странно, так как я использовал этот код раньше с php внутри и тогда, тогда он работал.

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

<div class="container-fluid relevant__wrapper">
  <div class="row">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <h3>Relevante informatie</h3>
        </div>
      </div>
      <!-- activiteiten -->
      <div class="row relevant__row__wrapper" id="activiteiten__wrapper">
        <div class="relevant__title">
          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <h4>Activiteiten</h4>
            <a class="more" href="themas">bekijk meer</a>
          </div>
        </div>
        <div class="relevant__row" id="activiteiten__row">
          <?php
            $posts = get_field('activiteiten');

            if( $posts ): ?>
            <?php foreach( $posts as $post):?>
              <?php setup_postdata($post); ?>
                <a href="<?php the_permalink();?>">
                  <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 relevant__item">
                    <div class="thumbnail__wrapper">
                      <?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
                      <div class="thumbnail" style="background-image:url('<?php echo $thumb['0'];?>');"></div>
                    </div>
                    <div class="title">
                      <h4><?php the_title();?></h4>
                    </div>
                  </div>
                </a>
              <?php endforeach; ?>
            <?php wp_reset_postdata();?>
          <?php endif; ?>
        </div>
      </div>
      <!-- actueel -->
      <div class="row relevant__row__wrapper" id="actueel__wrapper">
        <div class="relevant__title">
          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <h4>Actueel</h4>
            <a class="more" href="themas">bekijk meer</a>
          </div>
        </div>
        <div class="relevant__row" id="actuel__row">
          <?php
            $posts = get_field('actueel');

            if( $posts ): ?>
            <?php foreach( $posts as $post):?>
              <?php setup_postdata($post); ?>
                <a href="<?php the_permalink();?>">
                  <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 relevant__item">
                    <div class="thumbnail__wrapper">
                      <?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
                      <div class="thumbnail" style="background-image:url('<?php echo $thumb['0'];?>');"></div>
                    </div>
                    <div class="title">
                      <h4><?php the_title();?></h4>
                    </div>
                  </div>
                </a>
              <?php endforeach; ?>
            <?php wp_reset_postdata();?>
          <?php endif; ?>
        </div>
      </div>
      <!-- blog -->
      <div class="row relevant__row__wrapper" id="blog__wrapper">
        <div class="relevant__title">
          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <h4>Blog</h4>
            <a class="more" href="themas">bekijk meer</a>
          </div>
        </div>
        <div class="relevant__row" id="blog__row">
          <?php
            $posts = get_field('blog');

            if( $posts ): ?>
            <?php foreach( $posts as $post):?>
              <?php setup_postdata($post); ?>
                <a href="<?php the_permalink();?>">
                  <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 relevant__item">
                    <div class="thumbnail__wrapper">
                      <?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
                      <div class="thumbnail" style="background-image:url('<?php echo $thumb['0'];?>');"></div>
                    </div>
                    <div class="title">
                      <h4><?php the_title();?></h4>
                    </div>
                  </div>
                </a>
              <?php endforeach; ?>
            <?php wp_reset_postdata();?>
          <?php endif; ?>
        </div>
      </div>
      <!-- publicaties -->
      <div class="row relevant__row__wrapper" id="publicaties__wrapper">
        <div class="relevant__title">
          <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <h4>Publicaties</h4>
            <a class="more" href="themas">bekijk meer</a>
          </div>
        </div>
        <div class="relevant__row" id="publicaties__row">
          <?php
            $posts = get_field('publicaties');
            if( $posts ): ?>
            <?php foreach( $posts as $post):?>
              <?php setup_postdata($post); ?>
                <a href="<?php the_permalink();?>">
                  <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 relevant__item">
                    <div class="thumbnail__wrapper">
                      <?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
                      <div class="thumbnail" style="background-image:url('<?php echo $thumb['0'];?>');"></div>
                    </div>
                    <div class="title">
                      <h4><?php the_title();?></h4>
                    </div>
                  </div>
                </a>
              <?php endforeach; ?>
            <?php wp_reset_postdata();?>
          <?php endif; ?>
        </div>
      </div>
    </div>
  </div>
</div>

Это структура.

jQuery Я использую:

if ($('#activiteiten__row').is(':empty')){
    $('#activiteiten__wrapper').hide();
  }

  if ($('#actueel__row').is(':empty')){
    $('#actueel__wrapper').hide();
  }

  if ($('#blog__row').is(':empty')){
    $('#blog__wrapper').hide();
  }

  if ($('#publicaties__row').is(':empty')){
    $('#publicaties__wrapper').hide();
  }

Идея состоит в том, что когда «.relevant__row» не содержит дочерних элементов («.relevant__item»), весь ряд не виден, поэтому он скрывается.

1 Ответ

0 голосов
/ 06 февраля 2020

На основании комментариев я бы посоветовал это. Это более надежно, чем ': isempty'

if ($('#activiteiten__row').html().length === 0){
    $('#activiteiten__wrapper').hide();
  }

Однако, как сказал PatrickQ в комментариях, возможно, разумнее будет переместить ваше выражение php if. Положите

<?php if ($posts): ?>

выше вашей html оболочки

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...