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 - 如何删除数组的多个顺序项-JavaScript

javascript - jQuery选择器需要选择父级的所有某些子级

html - 使用<span>对齐图像和文本

css - Bootstrap 表单行宽

javascript - 如何在 ReactJS 中跳过某些路由的页眉和页脚?

javascript - 单击时包含基于 HTML 的 Blade View

javascript - 在jQuery验证插件中添加自己的规则

html - 单击时如何更改文本和按钮图像(或按钮)

每月第二个星期一的 Javascript 日期

javascript - AJAX jQuery返回json数据循环键和值