Question

我在下面的代码中添加了一个问题/答案。

它有效，但是它以错误的顺序写入div。它在最后一个之前放置了任何新的div，所以编号变得不正常了：

Question 3
Question 2
Question 1

我玩了appendTo，追加，但我做的任何事都行不通。

任何帮助将不胜感激。谢谢！

以下是代码：

$(".questionButton").click(function () {
var parentId = $("button").closest("div").attr("id");
var newTextBoxDiv = $("<div>").attr("id", 'question' + questionCounter);
        $(this).after(newTextBoxDiv);
        newTextBoxDiv.after().html(
            "<table><tr>" +
            "<td>" +
            "<label>Question " + questionCounter + ": </label>" +
            "</td><td>" +
            "<input type='text' name='tbQuestion' id='tbQuestion" + questionCounter + "' value='' >" +
            "</td>" +
            "<td class='removeQuestion'>x</td>" +
            "</tr><tr><td>" +
            "<label>Answer: </label>" +
            "</td><td>" +
            "<input type='text' name='tbAnswer'" id='tbAnswer" + questionCounter + "' value='' >" +
            "</td></tr></table>");
        newTextBoxDiv.appendTo("#" + parentId);
        questionCounter++;
});

HTML：

<div id="questionBox">
    <div id="mcq" style="display: none;" class="questionTypeDiv">
        <input type="button" class="questionButton" value="Add Question" style="margin-top: 4px;" />
        <table></table>
    </div>
</div>

Answer 1

您错误地在按钮后面添加了div，而不是<div id="mcq">：http://jsfiddle.net/ZTuhn/1/

您还可以通过正确选择前面的问题ID然后在此之后附加来修复此错误。但是，这需要对初始的questionBox id属性进行一些异常处理。

Answer 2

要按顺序追加，你应该像这样使用.append（）：

$.each([1,2,3], function(i,v) {
    $('#' + parentId).append('<p>Question ' + v + '</p>')
});

jquery appendTo html订购问题

2 个答案: