jquery .each() take image and title from a class and add each one to 5 diffrent div's

Question

I am stuck on this what I am trying to do is: there will be div's with the class of feature there could be an x amount of them but i only want 5 most resent. take the img src and a.html witch is a title link from each and add each one to 5 containing divs at the top of the page. the image as a background-image and the other prepend to an a tag. this is doing almost that but it takes the last image it finds and places that in each of the 5 containing divs and takes the title's it finds and also places each one in all 5 divs in other words its repeating when each containing div should be unique any help would be appreciated.

$(document).ready(function() {
    $('html body').find('.feature').each(function(e) {
        var post_image = $(this).find('img').attr('src');
        var post_title = $(this).find('a').html();

            $('.place_post_feature').each(function() {
                $(this).css({
                'backgroundImage': 'url(' + post_image + ')',
                'backgroundRepeat': 'no-repeat',
                'backgroundPosition': 'center',
                });

                $(this).find('a.preview').prepend(post_title);
            });//end each



    });//end find each
});//end ready

Answer 1

The 5 divs you have across the top can only have one background image each, so when your script cycles through and adds a background image, it replaces the previous one. This is why you are ending up with only the last .feature showing.

So my question is, the 5 divs at the top should contain smaller divs with the background image and title? And please share some HTML so we can all get a better idea of what you need.

Answer 2

You probably want to try something like this, having a one to one correspondence between the place posts and features and terminating when you've reached your five posts:

<script type="text/javascript">
    $(document).ready(function() {
        var placePosts = $('.place_post_feature');
        $('html body').find('.feature').each(function(index) {
            if (index < 5) {
                var post_image = $(this).find('img').attr('src');
                var post_title = $(this).find('a').html();

                if (index < placePosts.length) {
                    $(placePosts[index]).css({
                        'backgroundImage': 'url(' + post_image + ')',
                        'backgroundRepeat': 'no-repeat',
                        'backgroundPosition': 'center'
                    });
                    $(placePosts[index]).find('a.preview').prepend(post_title);
                }
            }
        });//end find each
    });//end ready
</script>