如何从jquery过滤的项目中删除空格？

Question

我从一个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或我应该计算无限长度吗？

这里的元素：

<div id="success_stories">           </div> 

阿贾克斯数据记录被从该页面拉为：

<?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> 

Answer 1

您的代码存在一些问题，它会生成无效的HTML，仅仅是因为您附加了el当您从服务器拉取结果不止一次时，使用相同的ID（success_stories + success_videos）。

什么，我的建议是恢复从服务器对象的数组，并创建在客户端的元素：

$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上的元素，并将每一个附加到容器。