单击按钮突出显示第n个子项隐藏内容使用jquery

Question

PHP

<div id="lightbox" class="row filteredVideoContent">
    <?php
         foreach ( $aVideo as $oVideo ){?>
    <div class="col-sm-6 col-md-3 col-lg-3 photography app" id="load_data">
        <div class="portfolio-item">
            <!-- <div class="hover-bg"> -->
            <div class="">
                <a href="#video_container" data-backdrop="static" class="video_thumb" data-toggle="modal" data-videopath="<?php echo $oVideo['videoPath']; ?>" data-videosubject="<?php echo $oVideo['videoSubject']; ?>">
                    <div class="hover-text" data-toggle="tooltip" data-placement="right" title="<?php echo $oVideo[ 'videoSubject' ];?>">
                        <h4> <?php echo substr($oVideo[ 'videoSubject' ],0,20); ?> </h4>
                    </div>
                    <?php
                  if( ! empty( $oVideo[ 'videoThumb' ] ) )
                  {
                   $thumbName = $oVideo[ 'videoThumb' ];
                  }
                  else
                  {
                   $thumbName = "assets/video/common.jpg";
                  }
                 ?>
                    <img style="height:188px;width : 263px"
                         src="<?php echo base_url () . $thumbName ?>" class="videoThumb img-responsive"
                         alt="<?php echo $oVideo[ 'videoSubject' ];?>">
                        </a>
                    </div>

                <div>Uploaded By : <span data-toggle="tooltip" data-placement="right" title="<?php echo $oVideo[ 'userName' ];?>"> <?php echo substr($oVideo[ 'userName' ],0,20);?> </span></div>
                <div>HQ : <span data-toggle="tooltip" data-placement="right" title="<?php echo @$oVideo[ 'hq' ];?>">  <?php echo substr(@$oVideo[ 'hq' ],0,20);?> </span></div>
                <div>Subject : <span data-toggle="tooltip" data-placement="right" title="<?php echo $oVideo[ 'videoSubject' ];?>">  <?php echo substr($oVideo[ 'videoSubject' ],0,20);?> </span></div>
            </div>
        </div>
        <?php
            }
           ?>
    </div>
    <?php if(count($aVideo) > 8){ ?>
    <p class="dash">&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;
        &nbsp;<button id="showAll" class="btn tf-btn btn-default" style="float:none;">Load More</button>&nbsp;
        &#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;</p>
    <?php } ?> 
</div>

的jQuery

$('#showAll').on('click', function(e){
    e.preventDefault();
    $('.filteredVideoContent .app').filter(':hidden').show();
    $('#showAll').hide();
    $('.dash').hide();
    });
$('#videoSearchInput').on('keyup',function(e){  
    e.preventDefault();
    $('#showAll').show();
     $('.dash').show();
    });
});

CSS

.filteredVideoContent .app{
  display: none;
}
.filteredVideoContent .app:nth-child(1),
.filteredVideoContent .app:nth-child(2),
.filteredVideoContent .app:nth-child(3),
.filteredVideoContent .app:nth-child(4),
.filteredVideoContent .app:nth-child(5),
.filteredVideoContent .app:nth-child(6),
.filteredVideoContent .app:nth-child(7),
.filteredVideoContent .app:nth-child(8) {
  display: block;
}
p { letter-spacing: 1px;}
p button { letter-spacing: 1px; margin: 0 5px; }

现在，当我点击“加载更多”按钮时，会显示隐藏数据。但是，当我点击那个按钮时，我希望直接滚动到隐藏的新数据或上面显示的数据，自动向下滚动到按钮点击时出现的新数据。

Answer 1

试试这个。您只需要获取要显示的div中的第一个，然后将文档滚动到该元素的位置。

$('#showAll').on('click', function(e){
    e.preventDefault();
    $scrollToElement = $('.filteredVideoContent .app:hidden').first();
    $('.filteredVideoContent .app').filter(':hidden').show();
    $('#showAll').hide();
    $('.dash').hide();
    $('html, body').animate({
        'scrollTop' : $scrollToElement.position().top
    });
});

Answer 2

点击“加载更多”，您可以使用此功能将内容滚动到顶部

var body = $("html, body");
body.stop().animate({scrollTop:Math.round(jQuery("#hiddenContainer").offset().top-65)}, '500', 'swing', function() { 
   console.log("Finished animating");
});

jQuery（“＃hiddenContainer”）是隐藏的容器ID