Reputation: 327
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?
Upvotes: 2
Views: 216
Reputation: 69967
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.
Upvotes: 2