我想用 .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/