Question

我正在构建一个搜索查询，它可以提供结果。

我有一个模板准备好隐藏div中的项目。我想要做的是使用jQuery多次复制模板。

所以例如：我搜索航班和我得到5个搜索结果，我需要复制下面的div模板 5次

<div id="oneWayFlightElement" class="displayNone">
        <div id="flightIndex1" class="flightDetailElement boxShadowTheme">
                <div id="flightDetailsLeftPanel1" class="flightDetailsLeftPanel marginBottom10">
                    <div class="fullWidth marginTop10">
                        <span id="flightPriceLabel1" class="headerFontStyle fullWidth boldFont">Rs 9500.00</span><hr/>
                           <div id="homeToDestination1" class="flightBlockStyle">
                            <span id="flightNumberFromHome1" class="fontSize16">AI-202</span><br/>
                               <span id="flightRouteFromHome1" class="fontSize26">PNQ > DEL</span><br/>
                               <span id="flightDepartTimeFromHome1" class="fontSize26">Depart: 10.00 AM</span><br/>
                               <span id="flightArrivalTimeFromHome1" class="fontSize26">Arrive: 12.00 PM</span><br/>
                           </div>
                           <div id="destinationToHome1" class="flightBlockStyle">
                            <span id="flightNumberToHome1" class="fontSize16">AI-202</span><br/>
                               <span id="flightRouteToHome1" class="fontSize26">PNQ > DEL</span><br/>
                               <span id="flightDepartTimeToHome1" class="fontSize26">Depart: 10.00 AM</span><br/>
                               <span id="flightArrivalTimeToHome1" class="fontSize26">Arrive: 12.00 PM</span><br/>
                           </div>
                       </div>
                   </div>
                   <div id="flightDetailsRightPanel1" class="flightDetailsRightPanel textAlignRight marginBottom10">
                    <img src="images/flightIcon.png" class="marginRight10 marginTop10 width40"/><br/>
                       <button class="marginRight10 marginBottom10 width40 bookNowButtonStyle">Book Now</button>
                   </div>
                </div>
    </div>

在这个div里面5次

<div id="searchFlightResultDiv" class="fullWidth" style="border:solid">

                </div>

有没有比jQuery中的字符串追加更好的方法呢？

谢谢， Ankit Tanna

Answer 1

function populateResult(resCount) {
    resCount = typeof resCount === 'number' ? resCount : 0;
    var res = [];
    var templateEle = $('#oneWayFlightElement');

    for(var i = 0; i < resCount; ++i)
        res.push(templateEle.clone().removeAttr('id class')[0]);

    $('#searchFlightResultDiv').html(res);
}

populateResult(5);

我们在循环时使用数组res来保存DOM元素，最后使用html方法将其设置为目标div。我们不需要JQuery对象，因为html方法接受任何类似对象的数组。通过这种方式，我们可以最大限度地减少浏这是JSFiddle

Answer 2

您需要将模板div（#flightIndex1）包装在具有唯一id属性的容器中。然后，您获取该容器的内容（单个记录的模板），并根据收到的结果数使用某种类型的循环将其附加到结果div（#searchFlightResultDiv）。 / p>

基本上，

<强> HTML ：

<!-- Here's your template -->
<div class="displayNone" id="oneWayFlightElement">
    <!-- This id (singleResult) is important -->
    <div id="singleResult">Result</div>
</div>
<!-- Container for the results -->
<div id="results"></div>

<强>的Javascript ：

//Get the number of results. 
//This can be sent from your API or however you're getting the data.
//For example, in PHP you would set this to $query->num_rows();
var count = 5;

//Start a for loop to clone the template element (div#singleResult) into div#results 'count' times.
//This will repeat until the number of records (count) has been reached.
for (i = 1; i <= count; i++) {

    //Append the HTML from div#thingToRepeat into the #results.
    $('#results').append($('#singleResult').clone());

}

这里有一个JSFiddle来向您展示它是如何运作的。您可以使用它并在必要时进行调整。

我无法清醒地完成这篇文章而不告诉你这个问题的缺点。这样做是主要在Web开发社区中不受欢迎，并且超级效率低下。它可能对练习和学习有好处，但请看一下并考虑一个javascript模板框架，如moustache或handlebars。它做同样的事情，但更有效率。

希望这有用！

jQuery复制现有的Div Multiple Times

2 个答案: