HTML5 div包装克隆

Question

How can i clone the below HTML5 wrap. The code contains also some php serialized that must be in order , example Article one has <?php echo $price[n];?> where n must be a number from 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 -->

I have a code that generates arround 20-30 hotels, Each hotel has his own article and his own variable as $price[], $name[], etc were the [n] value in a number in ascending order starting from 0. How can i generate the above div x how many hotels availeble and to insert the variable value automatic ?.

Answer 1

something like this? http://jsfiddle.net/swm53ran/173/

i simplified the code a bit and did everything in jquery, but i put notes on how to do it with php (i dont have readily available access to php editor) but the concept is the same.

<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');
    }
});

you'd get the hotels array from php (im assuming) and then you can put php right into the html of the clone if you take out the spaces, then use i as the incrementor from the for loop. hope this helps