Question

如何克隆以下HTML5包装。该代码还包含一些必须按顺序排列的php序列化，例如第一条有<?php echo $price[n];?>，其中n必须是0-15之间的数字。

<!-- ARTICLE START -->
    <div class="col-sm-6 col-md-4">
        <article class="box has-discount">
            <figure>
                <a class="hover-effect popup-gallery" href=
                "ajax/slideshow-popup.html"><img alt="" height="161" src=
                "<php echo $img[0];?>" width="270"></a> <span class=
                "discount"><span class="discount-text">VIP
                DISCOUNT</span></span>
            </figure>

            <div class="details">
                <span class="price"><small>avg/night</small> $<php echo $price[0];?></span>

                <h4 class="box-title"><php echo $name[0];?>small><php echo $city[0];?></small></h4>

                <div class="feedback">
                    <div class="five-stars-container" data-original-title=
                    "4 stars" data-placement="bottom" data-toggle="tooltip"
                    title="">
                        <span class="five-stars" style="width: 80%;"></span>
                    </div><span class="review">270 reviews</span>
                </div>

                <p class="description">Nunc cursus libero purus ac congue arcu
                cursus ut sed vitae pulvinar massa idporta nequetiam.</p>

                <div class="action">
                    <a class="button btn-small" href=
                    "hotel-detailed.html">SELECT</a> <a class=
                    "button btn-small yellow popup-map" data-box=
                    "48.856614, 2.352222" href="#">VIEW ON MAP</a>
                </div>
            </div>
        </article>
    </div>
<!--  ARTICLE END -->

我有一个生成20-30家酒店的代码，每个酒店都有他自己的文章和他自己的变量，因为$ price []，$ name []等是从0开始按升序排列的数字中的[n]值。我怎样才能生成上面的div x有多少酒店可用并自动插入变量值？

Answer 1

这样的事情？ http://jsfiddle.net/swm53ran/173/

我简化了代码并在jquery中做了所有事情，但我记下了如何使用php（我没有随时可以访问php编辑器），但概念是相同的。

<div class="hotel" id="template" style="display:none;">
    <div class="name"></div>
    <div class="price"></div>
</div>


$(document).ready(function() {
    var hotels = [
        {'name': 'hotel1', 'price':'$200'},
        {'name': 'hotel2', 'price':'$300'},
        {'name': 'hotel3', 'price':'$700'},
        {'name': 'hotel4', 'price':'$100'}
    ];
    for(var i = 0; i < hotels.length; i++) {
        var clone = $('#template').clone(true).attr('id', '');
        clone.css('display', '');
        clone.find('.name').html('Name: ' + hotels[i]['name'] + '. With php should be something like < ? php echo $name[i]; ? >');
        clone.find('.price').html('Price: ' + hotels[i]['price'] + '. With php should be something like < ? php echo $price[i]; ? >');
        clone.appendTo('body');
    }
});

你从php（我假设）得到酒店数组然后你可以把PHP放到克隆的html中，如果你取出空格，然后使用i作为for循环的增量。希望这有帮助

HTML5 div包装克隆

1 个答案: