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

Question

I've been having problems pulling in thumbnails from simplepie rss. Ive looked all over including here on SO but cant seem to find a good solution that works. Especially because i want thumbnails on ALL feeds and their threads.

This said, what I've decided to do is, that with jquery, to search the rss content div for an img source, save that source string into a variable, and use that value to fill in another div that i set up specifically for thumbnails. Almost all posts have an image so it should do fine.

I got it working but theres a portion that i cant wrap my brain around. The rss is fed into the page with php via a for loop. Fir the sake of testing the app, i pull in 2 feeds at a time with this

$feed->set_item_limit(2);

So this means that the code below (php) runs twice, giving me two feeds.

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

I want to take the images source from this html/php above, store them in a variable so i can then append it to another div to create my own thumbnails.

I got it working with this: [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();

The problem I'm having is that, although it does work, the issue is that since the HTML/PHP code above is in a loop, what it's doing is, it is taking the newly created thumb created with jQ, and putting it on ALL the posts using the image from the first post. Its taking the image from the first post and adding it as a thumb to ALL the posts.

So for example, say that we have the initial two posts.

POST 1
   POST 1 IMAGE


POST 2
   POST 2 iMAGE

What its doing is this:

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

What i want it to do is this:

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

I understand WHY its doing it, what i cant figure is out how to make the jQuery code loop like the php does. I've tried inserting the "script" block into the thumb div so it iterates as the loop is going through, like this:

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

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


</div>

but to no avail.

Ive also place the script tag on the header (as oppose to the footer where i always put it) and also no go.

When i reload the page, the thumb just disappears OR keeps the default icon.

Hope this is clear. Anyone has any idea as to how i can make this happen? im close! i know it! lol.

Any assistance is appreciated. Thank you in advanced.

Answer 1

I actually solved this deeper jquery dom traversal. The tags changed but essentially it does what i needed it to do (as described in my original question). Putting it here for anyone who needs a similar solution

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