How to make an unique div id?

Question

here is my html markup... the problem is the javascript looping doesnt work... i did some kind of mistakes.. i dont know why... i want to loop $('#opt_art').mouseover etc... and every loop makes the script like this first loop $('#opt_art1).mouseover, second loop $('#opt_art2).mouseover, etc

<?php include('header.php'); ?>
    <script type="text/javascript">
        $(document).ready(function(){
            var i = 0;
            do{
                var num = i;
                $('#opt_art'+num).mouseover(function(){
                    $('.opsi'+num).show();
                });
                $('#opt_art'+num).mouseout(function(){
                    $('.opsi'+num).fadeOut(2000);
                });
                i++;    
            }
            while(i<=2);
        });
    </script>
    <?php
        for($i=1;$i<=2;$i++){
    ?>
        <div id="art_category"><p>News</p></div><!-- end of category -->
        <div id="art_title"><p>Sherlock Holmes 2</p></div><!-- end of art_title -->
        <div id="rounded_artikel">
            <li><img src="images/42897.jpg" width="110" height="110" class="art_image"/></li>
            <ul><li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum bibendum magna at egestas. Sed commodo gravida arcu id accumsan. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque vulputate, velit vitae pellentesque condimentum, lectus mi tempor nisl, sed sagittis est massa eu justo. Cras sed quam sed mauris elementum consectetur. Nunc vitae tortor diam, in hendrerit risus. Nulla et diam non libero vehicula blandit. Etiam facilisis, risus mattis venenatis iaculis, risus dolor lobortis sapien, a malesuada magna nibh nec tellus. Integer viverra, sapien quis pellentesque lobortis, tellus erat mattis nulla, vitae laoreet erat dolor sed ante.</p></ul></li>
        </div><!-- end of rounded_artikel -->
        <div id="art_info">
            <img src="images/communication-icon.png" width="23" height="23" class="comment"/><li class="total_komentar"><a href="#">123</a> Komentar</li>
            <img src="images/40395696544694793.png" width="23" height="21" class="art_date_icon"/><li class="art_date">19-06-2012</li>
            <img src="images/1903484911.png" width="23" height="21" class="author_icon"/><li class="author">straw_hat</li>
            <div id="opt_art<?=$i;?>">Option<?php echo $i; ?></div>
            <div class="opsi<?=$i;?>"><center><a href="#">Readmore</a> | <a href="#">Comment</a></center></div>
        </div><!-- end of art_info -->
    <?php } ?>
<?php include('footer.php'); ?>

Answer 1

Why it isn't working for you has already been answered, however I'd like to offer a better alternative to what you're doing.

Binding an event handler to multiple elements smells. You're looping over the matched set and adding an event handler for each element.

Instead you should attach the handler to one element and take advantage of event bubbling. This can be done using the on() method and the optional selector.

$(document).on('mouseover  mouseout', '[id^="opt_"]', function (e) {
    var el = $('.opsi'  + this.id.slice('opt_'.length));

    if (e.type === "mouseover") {
        el.show();
    } else {
        el.fadeOut(2000);
    }
});

The above code listens for a mouseover or mouseout event to fire, and checks whether it happened on an element whose ID begins with opt_, if it does it executes the event handler.

For more information you could read the full documentation for on()

Answer 2

You are not incermenting i also you can just use i variable instead of second var num. Try this.

var i = 1;
do{
   $('#opt_art'+i).mouseover(function(){
    $('.opsi'+i).show();
   });  
   $('#opt_art'+i).mouseout(function(){
        $('.opsi'+i).fadeOut(2000);
   });
}
while(i++<=5);

Answer 3

You forget to increment i variable:

   ...
   });
   i++;
}
while(i<=5);