我正在从Ajax响应中过滤一个元素：
var storyResults = $(data).filter('#success_stories');
var videoResults = $(data).filter('#success_videos');
if(storyResults.length == 0) {
//hide the Load More button if there are no more records to load
$(".load_more_stories").hide();
$(".load_more_videos").show();
}
if(videoResults.length == 0) {
//hide the Load More button if there are no more records to load
$(".load_more_stories").hide();
$(".load_more_videos").hide();
}
现在我无法做到：
(storyResults.trim().length == 0)
当我想这样做时，我得到错误的数组，那么我怎样才能从数组元素中修剪空格呢？
更新：
我想要做的是实现length == 0如果我是正确的，通过从以下元素中删除空格，它会使元素的长度为0或者我应该计算innertext长度？
以下是元素：
<div id="success_stories"> </div>
Ajax数据记录将从此页面中删除：
<?php
$page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);
//throw HTTP error if page number is not valid
if(!is_numeric($page_number)){
header('HTTP/1.1 500 Invalid page number!');
exit();
}
$item_per_page_story = "30";
$story_start = (($page_number-1) * $item_per_page_story);
$story_end = $page_number * $item_per_page_story;
$item_per_page_video = "11";
$vid_start = (($page_number-1) * $item_per_page_video);
$vid_end = $page_number * $item_per_page_video;
?>
<?php if (array_key_exists($story_start, $clinic_stories)) { ?>
<div id="success_stories">
<?php
for ($i=$story_start; $i < $story_end; $i++) {
if (isset($clinic_stories[$i])) { ?>
<?php $patient_name = $clinic_stories[$i]->getPatientName(); ?>
<?php if ($clinic_stories[$i]->getThumbnail()):?>
<div class="col-md-4">
<a data-featherlight="success/<?php echo $i+1; ?>" href="#">
<span class="thumbnail grow" style="position: relative;left: 0px;top: 0px;">
<img src="<?= "/uploads/" . $clinic_stories[$i]->getThumbnail() ?>" style="width:200px;height:150px;" alt="" />
</span>
</a>
</div><?php endif; ?><?php } } ?></div>
<?php } else { echo '<div id="no_stories"></div>'; } ?>
<?php if (array_key_exists($vid_start, $clinic_videos)) { ?>
<div id="success_videos"><?php
for ($i=$vid_start; $i < $vid_end; $i++) {
if (isset($clinic_videos[$i])) {
$embed = $clinic_videos[$i]->getEmbed();
$pos_vidStart = strpos($embed, "embed/");
$pos_vidEnd = strpos($embed, "\"", $pos_vidStart+6);
$embed = substr($embed, $pos_vidStart+6, $pos_vidEnd - ($pos_vidStart+6));
?>
<div class="success-stories-video-frame">
<input type="hidden" id="vid<?= $i+1; ?>" value="<?= $embed ?>">
<?php if ($clinic_videos[$i]->getThumbnail()):?>
<span class="thumbnail">
<a data-featherlight="reviews/video/id/<?php echo $embed; ?>" data-featherlight-iframe-overflow="hidden" href="#"> <img src="<?= "/uploads/" . $clinic_videos[$i]->getThumbnail() ?>" alt="video file" title="CLICK TO PLAY" /></a>
</span>
<?php endif; ?>
</div><?php } } ?></div>
<?php } else {
echo '<div id="no_videos"></div>';;
} ?>
整个JS代码如下：
<script type="text/javascript">
var track_page = 1; //track user click as page number, right now page number is 1
load_contents(track_page); //load content
$(".load_more_stories").click(function (e) { //user clicks on button
track_page++; //page number increment everytime user clicks load button
load_contents(track_page); //load content
});
$(".load_more_videos").click(function (e) { //user clicks on button
track_page++; //page number increment everytime user clicks load button
load_contents(track_page); //load content
});
//Ajax load function
function load_contents(track_page){
$('.animation_image').show(); //show loading image
$.post( '<?php echo $url; ?>/get-reviews', {'page': track_page}, function(data){
var storyResults = $(data).filter('#success_stories');
var videoResults = $(data).filter('#success_videos');
if(storyResults.text().trim().length == 0) {
//hide the Load More button if there are no more records to load
alert(storyResults.text());
$(".load_more_stories").hide();
$(".load_more_videos").show();
}
if(videoResults.length == 0) {
//hide the Load More button if there are no more records to load
$(".load_more_stories").hide();
$(".load_more_videos").hide();
}
$("#story_results").append(storyResults); //append data into #results element
$("#video_results").append(videoResults); //append data into #results element
//scroll page to button element
$("html, body").animate({scrollTop: $(".box-content").offset().bottom}, 100);
//hide loading image
$('.animation_image').hide(); //hide loading image once data is received
});
}
</script>
答案 0 :(得分：1)
您的代码存在一些问题，只是当您从服务器提取结果时附加具有相同ID（success_stories + success_videos）的元素时，它会生成无效的HTML一旦。
我建议的是从服务器返回一组对象并在客户端创建元素：
$item_per_page_story = "30";
$story_start = (($page_number-1) * $item_per_page_story);
$story_end = $page_number * $item_per_page_story;
$item_per_page_video = "11";
$vid_start = (($page_number-1) * $item_per_page_video);
$vid_end = $page_number * $item_per_page_video;
$results = array(
'stories' => array(),
'videos' => array()
);
if (array_key_exists($story_start, $clinic_stories)) {
$story = array();
for ($i=$story_start; $i < $story_end; $i++) {
if (isset($clinic_stories[$i])) {
$story['id'] = $i + 1;
$story['patient_name'] = $clinic_stories[$i]->getPatientName();
if ($clinic_stories[$i]->getThumbnail()) {
$story['thumbnail'] = $clinic_stories[$i]->getThumbnail();
}
}
}
array_push( $results['stories'], $story );
}
if (array_key_exists($vid_start, $clinic_videos)) {
$video = array();
for ($i=$vid_start; $i < $vid_end; $i++) {
if (isset($clinic_videos[$i])) {
$video['id'] = $i+1;
$embed = $clinic_videos[$i]->getEmbed();
$pos_vidStart = strpos($embed, "embed/");
$pos_vidEnd = strpos($embed, "\"", $pos_vidStart+6);
$video['embed'] = substr($embed, $pos_vidStart+6, $pos_vidEnd - ($pos_vidStart+6));
if ($clinic_videos[$i]->getThumbnail()) {
$video['thumbnail'] = $clinic_videos[$i]->getThumbnail();
}
}
}
array_push( $results['videos'], $video );
}
echo json_encode( $results );
接下来，当您从服务器获取数据时，您将获得从服务器返回的视频和故事的JSON对象：
function load_contents(track_page){
$('.animation_image').show(); //show loading image
$.post( '<?php echo $url; ?>/get-reviews', {'page': track_page}, function(data){
// Check the console to see the results from the server
console.log( data );
var storyResults = data.stories;
var videoResults = data.vidoes;
if(storyResults.length == 0) {
//hide the Load More button if there are no more records to load
$(".load_more_stories").hide();
$(".load_more_videos").show();
} else {
// Here we create the elements using jquery
for( var i = 0; i < storyResults.length; i++ ) {
$('<div></div>').addClass("col-md-4").append(
$('<a></a>').attr('data-featherlight', 'success/' + storyResults[i].id).attr('href', '#').append(
$('<span></span>').addClass('thumbnail').addClass('grow').css({
'position': 'relative',
'left': 0,
'top': 0
}).append(
$('<img />').attr('src', '/uploads/' + storyResults[i].thumbnail)
)
)
).appendTo( "#story_results" )
}
}
/// SAME LOGIC FOR videoResults
//scroll page to button element
$("html, body").animate({scrollTop: $(".box-content").offset().bottom}, 100);
//hide loading image
$('.animation_image').hide(); //hide loading image once data is received
});
}
现在，如果您发现它很难，您仍然可以在服务器端创建html，并将每个HTML附加到数组中。简化示例：
$results = array(
'stories' => array(),
'videos' => array()
);
for ($i=$story_start; $i < $story_end; $i++) {
$storyHTML = '<div class="col-md-4">
<a data-featherlight="success/' . ($i+1) . '" href="#">
<span class="thumbnail grow" style="position: relative;left: 0px;top: 0px;">
<img src="/uploads/"' . $clinic_stories[$i]->getThumbnail() . '" style="width:200px;height:150px;" alt="" />
</span>
</a>
</div>';
array_push( $results['stories'], $storyHTML );
}
echo json_encode( $results );
然后你只需要遍历jQuery上的元素并将每个元素追加到容器中。