javascript - ajax,在ajax成功时缩短每个div的高度

标签 javascript jquery css ajax

我想用 .shorten-post 类来缩短 ajax 响应中 div 的高度,但我不知道如何实现。

我只想缩短 ajax 响应中的那些而不是整个文档

目前这是我处理ajax的脚本

var page = 1;

$(window).scroll(function() {
    if ($(window).scrollTop() >= $(document).height() - $(window).height() - 100) {
        page++;
        loadMoreData(page);
    }
});


function loadMoreData(page){
  $.ajax(
        {
            url: '?page=' + page,
            type: "get",
            beforeSend: function()
            {
                $('.ajax-load').show();
            }
        })
        .done(function(profcontent)
        {
            if(profcontent == ""){
                $('.ajax-load').html("No more records found");
                return;
            }
            $('.ajax-load').hide();
            $(profcontent).filter('.shorten-post').each(function(){
              if ($(this).height() > 100) {
                $(this).height(50).css({ 'overflow': 'hidden'});
                $(this).siblings('.toggle-shorten-post').show();
            }});
            $(profcontent).insertBefore("#post-data");

        })
        .fail(function(jqXHR, ajaxOptions, thrownError)
        {
              alert('server not responding...');
        });
}

编辑

这是我的专业内容的代码摘要

<div id="tu_mainpost_<?php echo($current_post['slug_unique']); ?>" class="tu-post">
    <div class="tu-post-header">
    </div>
    <div class="tu-post-image alt-grid shorten-post">
        <div class="row">
            <img class="img-responsive" src="<?php echo(base_url('assets/img/uploads/' . $current_post['source_img'])); ?>" style="width: 100%; height: inherit;">
        </div>
        <div class="row">
            <div class="col-md-12 tu-main-description" style="margin: 10px 0px;">
                <div class="tu-main-description">
                    <p class="wordbreak"><?php echo nl2br($current_post['description']); ?></p>
                </div>
             </div>
        </div>
    </div>
</div>

最佳答案

你可以改变 $(profcontent)

        if(profcontent == ""){
            $('.ajax-load').html("No more records found");
            return;
        }
        $('.ajax-load').hide();
        var $profcontent = $(profcontent);
        $profcontent.filter('.shorten-post').each(function(){
          if ($(this).height() > 100) {
            $(this).height(50).css({ 'overflow': 'hidden'});
            $(this).siblings('.toggle-shorten-post').show();
        }});
        $profcontent.insertBefore("#post-data");

关于javascript - ajax,在ajax成功时缩短每个div的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46740245/

相关文章:

javascript - 调整外部div大小时如何避免内部div溢出?

javascript - 使用 Javascript 悬停时的 CSS 动画

javascript - 我们如何使用 JavaScript 或 jQuery 将 HTML 表单数据保存为 xml 格式?

javascript - 输入表单以更改 javascript 中的相对 URL

JavaScript 计算机人工智能

php - 使用 MySQL、PHP 和 AJAX 进行实时搜索无法正常工作

javascript - CSS - 纯 CSS + AngularJS 中的旋钮光标

html - 为选择提供与输入相同的轮廓样式

javascript - 在拉斐尔的节点后面画线

javascript - YUI dataTable 行可展开/可折叠