Question

So I have something like this:

<?php foreach($post_array as $post): ?>
    <div class="postBodyWrapper">
        <div class="vid-link">
            <script type="text/javascript">
                $(function() {
                    $(".vidthumb").append("<img class='thumb' src='<?php echo $post->vid_link; ?>'/>");
                });
            </script>
            <div class="vidthumb"></div>
        </div>
    </div>
<?php endforeach; ?>

Let’s say I have five posts in the $post_array. Then the <div class="vidthumb"></div> of each post will contain all five images (that are generated from the JavaScript code), instead of only the one that is supposed to. How can I fix it?

Answer 1

Try:

<?php $i = 0; foreach($post_array as $post): ?>
<div class="postBodyWrapper">
    <div class="vid-link">
        <script type="text/javascript">
            $(function() {
                    $("#vidthumb_<?php echo $i ?>").append("<img class='thumb' src='<?php echo $post->vid_link; ?>'/>");
            });
        </script>                           
        <div id="vidthumb_<?php echo $i++ ?>"></div>
    </div>
</div>
<?php endforeach; ?>

By giving each vidthumb div you want the thumb to appear in a unique ID, you can now target the specific div’s instead of the first match.