Question

例如，您在选择房间之后预订这家酒店您必须填写表格[s]。

此示例，您选择了一个房间。

lenHotel = 1;
plusCapacity = 2;

脚本：

$(function () {
for(var i = 0; i < lenHotel; i++) {
    $("#Step-02").find('#information-box').append(
        "<h4>" + (i + 1) +" .Room Name</h4>" +
        "<div class=\"box-content\">" +
        "<div class=\"field-row clearfix\"> " +
        "<input type=\"text\" placeholder=\"name\" id=\"name\"> " +
        "</div><div class=\"field-row clearfix\">" +
        "<div class=\"col-xs-6\"><select id=\"country\">" +
        "<option value=\"0\">Select Country</option><option value=\"1\">Country name</option><option value=\"2\">Country name</option>" +
        "</select></div>" +
        "<div class=\"col-xs-6\">" );

    if(hotel[i]['plusCapacity'] != 0) {

        $("#Step-02").find('.col-xs-6').append(
            "<select id=\"addPeople\">" +
            "<option value=\"0\">add people</option>"
        );

        for(var j = 0; j < hotel[i]['plusCapacity']; j++) {
            $(".col-xs-6").find('#addPeople').append(
                "<option value=\"' + j + '\">' + j + '</option>"
            );
        }
    } else {
        $("#Step-02").find('#information-box').append(
            "<div class=\"col-xs-6\"><select id=\"addPeople\" disabled>" +
            "<option value=\"0\"> The opt-out add </option>"
        );
    }
    $("#Step-02").find('#information-box').append("</select></div></div></div><hr />");
}
})

我只想要这个HTML：

<div id="information-box">
<h4>1. Room name</h4>
<div class="box-content">
    <div class="field-row clearfix">
        <input type="text" placeholder="name" id="name">
    </div>
    <div class="field-row clearfix">
        <div class="col-xs-6">
            <select id="country">
                <option value="0">Select Country</option>
                <option value="1">country name</option>
                <option value="2">country name</option>
            </select>
        </div>
        <div class="col-xs-6">
            <select id="addPeople">
                <option value="0">add people</option>
                <option value="1">1</option>
                <option value="2">2</option>
            </select>
        </div>
    </div>
</div>
</div>

但是，从剧本打印后：

<div id="information-box">
    <h4>1. Room name</h4>
    <div class="box-content">
        <div class="field-row clearfix">
            <input id="name" placeholder="name" type="text">
        </div>
        <div class="field-row clearfix">
            <div class="col-xs-6">
                <select id="country">
                    <option value="0">Select country</option>
                    <option value="1">country name </option>
                    <option value="2">country name</option>
                </select><select id="addPeople">
                    <option value="0">add people</option>
                </select>
            </div>
            <div class="col-xs-6">
                <select id="addPeople">
                    <option value="0">add people</option>
                </select>
            </div>
        </div>
    </div>
    <hr>
</div>

两次！打印addPeople ...问题是什么？

Answer 1

此处存在的问题是您使用类选择器找到所有与您相关的DOM col-xs-6 类。

在你的情况下，你有.find()查询功能，在DOM中找到两个匹配项，并且你在两个地方看到的原因是，你有一个相同的类名称 col-xs-6 < /强>

尝试指示您查询要放置数据的位置：

$("#Step-02").find('.col-xs-6').last().append( "<select id=\"addPeople\">" + "<option value=\"0\">add people</option>" );

Last - 可以帮到你。

code example

Answer 2

首先看一下代码中的问题。

你应该让jQuery明白你在哪里尝试附加代码。因为jQuery找到了第一个元素并且只附加在那里。

使用.eq()查找col-xs-6的索引。

$("#Step-02").find('.col-xs-6:eq(1)')而不是

$("#Step-02").find('.col-xs-6').append(
    "<select id=\"addPeople\">" +
    "<option value=\"0\">add people</option>"
);

不过，我不建议你在循环中操纵你的DOM。您应该将变量用作String并在循环中进行连接，然后附加它。

示例

for(var i = 0; i < lenHotel; i++) { var tempString = ""; tempString += "<div>"; tempString += "<select></select>"; tempString += "</div>"; //Append to the container $('.container').append(tempString); }

仅供参考，这只是关于如何在for循环中附加长HTML的示例，您可以根据需要进行必要的更改。

加载页面后打印HTML不好

2 个答案: