尝试通过id将锚标记从循环追加到div标记

Question

[我对Jquery非常基本，我试图将for循环中的值追加到div标记Id。如下所示： 我有一个静态div标记，显示带有下一个图标的图像。 我试图让div动态。 我的静态div看起来像：

 <div style="display: none;">
    <a href="images/img-fancybox.jpg" class="menu-img" rel="menu-img"> 
        <img src="images/img-fancybox.jpg" alt="menu1"/> 
    </a> 
    <a href="images/img-toprelated1.jpg" class="menu-img" rel="menu-img"> 
        <img src="images/img-toprelated1.jpg" alt="menu1"/> 
    </a> 
    <a href="images/img-fancybox.jpg" class="menu-img" rel="menu-img"> 
        <img src="images/img-fancybox.jpg" alt="menu1"/> 
    </a> 
</div>

和jquery：

    jQuery(".beverages-images .menu-img, .block-dishofday .menu-img").fancybox({ openEffect : 'none', closeEffect : 'none', padding: 0, loop: false });

这是我的循环：

for(var i=0;i<3;i++)
{                   
 $("#food").append("<a href='Image' class='menu-img' rel='menu-img'><img 
 src='Image' alt='menu1'/></a>"); 
}

这是我的div：

<div class="scanned-menu beverages-images" >
    <a  id="my-id" href="img.jpg" class="menu-img" rel="menu-img" 
   onclick="getCategoryImage('drinks');">
    <img src="img.jpg" alt=img.jpeg"/></a>

    <div style="display: none;" id="food">


    </div>
</div> 

Answer 1

Hay Manju这不是一个确切的解决方案，而是你所寻找的那种。

<div class="scanned-menu beverages-images" id="fancy">
    <a href="images/img-fancybox.jpg" class="menu-img" rel="menu-img"> 
        <img src="images/img-fancybox.jpg" alt="menu1"/> 
    </a>
    <div style="display: none;"> 
        <a href="images/img-fancybox.jpg" class="menu-img" rel="menu-img"> 
            <img src="images/img-fancybox.jpg" alt="menu1"/> 
        </a>
    </div>
</div> 

<script type="text/javascript">
    $("button").click(function(){
        $.ajax({url: "demo_test.php", success: function(result){
            /** Here is you getting the result from ajax call suppose you getting JSON like. */
            let JsonResult = [{"image": "image1.jpg"},{"image": "image2.jpg"},{"image": "image3.jpg"},{"image": "image4.jpg"},{"image": "image5.jpg"}]

            /** After this you have to arrange this in fancy box */
            let imageString = ''
            JsonResult.forEach(val => {

                /** Arrange this data as you fancy box runs. First check with multiple static data then arrange it according that. */

                imageString += `<a href="images/${val.image}" class="menu-img" rel="menu-img"> 
                                    <img src="images/${val.image}" alt="menu1"/> 
                                </a>
                                <div style="display: none;"> 
                                    <a href="images/${val.image}" class="menu-img" rel="menu-img"> 
                                        <img src="images/${val.image}" alt="menu1"/> 
                                    </a>
                                </div>`
            })

            $("#fancy").html(imageString)

        }});
    });
</script>