Simplepie rss缺少缩略图,使用jQuery替代解决方案

时间:2015-03-22 14:01:37

标签: php jquery html simplepie

我一直在从simplepie rss中拉入缩略图时遇到问题。我一直在看这里包括SO,但似乎无法找到一个有效的解决方案。特别是因为我想要所有Feed及其主题的缩略图。

这就是说,我决定用jquery来搜索rss内容div中的img源代码,将源代码字符串保存到变量中,并使用该值填充我设置的另一个div特别为缩略图。几乎所有的帖子都有图像,所以它应该可以。

我得到了它的工作但是有一部分我无法包裹我的大脑。 rss通过for循环进入php页面。为了测试应用程序,我用这个

一次拉入2个Feed
$feed->set_item_limit(2);

所以这意味着下面的代码(php)运行两次,给我两个feed。

[ PHP + HTML ]

<div id="mainContW">
<h1>Feed Content below</h1>
<br><br>

  <?php 
    //loop through all the content
    foreach($feed->get_items() as $feedItems){
  ?>
  <div class="feedContBox">
    <h2><a href="<?php echo $feedItems->get_permalink(); ?>" target="new"><?php echo $feedItems->get_title(); ?></a></h2>
    <br>
    <div class="feedThm"><img src="images/default-thm.jpg" alt=""></div>

    <br>

    <?php //echo $feedItems->get_description(); ?>
    <div class="feedContActual"><?php echo $feedItems->get_content(); ?></div>
    <br>
    <?php echo $feedItems->get_date(); ?>
    <br><br>
  </div><!-- feedContBox ender -->
  <?php
      }
    } //this ends the if/else above towards the top
  ?>

</div><!-- mainContentW ender -->

我想从上面的html / php中获取图像源,将它们存储在一个变量中,然后我可以将它附加到另一个div来创建我自己的缩略图。

我得到了它:[ jQuery ]

function replaceThm(){

    //this is a div to hold my own thumbnails
    var feedThm = $('.feedThm img');


    //this finds the img tag src on the content div from the feed
    var imgThm = $('.feedContActual').find("img").attr("src");

    feedThm.attr('src', imgThm);
}

replaceThm();

我遇到的问题是,尽管它确实有效,但问题在于,由于上面的HTML / PHP代码是循环的,它正在做的是,它采用了用jQ创建的新创建的拇指,并且使用第一篇文章中的图像将其放在所有帖子上。它从第一篇文章中获取图像并将其作为拇指添加到所有帖子中。

例如,假设我们有最初的两个帖子。

POST 1
   POST 1 IMAGE


POST 2
   POST 2 iMAGE

它的作用是什么:

NEW THUMB FROM THIS DIV IMG SOURCE equals TO POST 1 IMAGE (GOOD)
POST 1
   POST 1 IMAGE

NEW THUMB FROM THIS DIV IMG SOURCE equals TO POST 1 IMAGE (**NOT GOOD**)
POST 2
   POST 2 iMAGE

我想要它做的是:

NEW THUMB FROM THIS DIV IMG SOURCE equals TO POST 1 IMAGE (GOOD)
POST 1
   POST 1 IMAGE

NEW THUMB FROM THIS DIV IMG SOURCE equals TO POST 2 IMAGE (GOOD)
POST 2
   POST 2 iMAGE

我理解为什么它这样做,我不知道如何制作像php那样的jQuery代码循环。我已经尝试将“脚本”块插入到拇指div中,因此它会在循环进行时进行迭代,如下所示:

<div class="feedThm">
  <script type="text/javascript">
    replaceThm();
  </script>

  <img src="images/default-thm.jpg" alt="">


</div>

但无济于事。

我还将脚本标记放在标题上(与我总是放置的页脚相对),也没有去。

当我重新加载页面时,拇指会消失或保留默认图标。

希望这很清楚。任何人都知道如何才能实现这一目标?快到了!我知道!洛尔。

感谢任何帮助。先谢谢你。

1 个答案:

答案 0 :(得分:0)

我实际上解决了这个更深入的jquery dom遍历。标签发生了变化,但基本上它完成了我需要它做的事情(如我原来的问题所述)。将它放在需要类似解决方案的任何人身上

$('.feedContBox').each(function(){
    var src = $(this).find('.feedContActual img:first').attr('src');
    $(this).find('.myThmDiv img').attr('src', src);
});