javascript - 检测嵌套列表 id

Question

通过 jquery 添加新元素时，如何根据当前存在的内容在嵌套列表中定义具有特定名称或 id 的每个元素？

示例:

问题1 答案1 答案2

添加答案

当我点击“添加答案”时，我想添加一个新答案，但知道它是“ans3”。此外，将有多个顶级列表和嵌套列表，因此需要知道它与哪个问题相关联。

前)

Question 1

Answer 1
Answer 2

Question 2

Answer 1
Answer 2

谢谢!

Answer 1

这里有两个 javascript/jquery 事实，当您为此设计解决方案时，它们将会很有用。

1. 事件回调绑定(bind)到执行时触发事件的对象。
2. DOM 元素可以具有任意数量的 data-* 属性来携带数据。

因此，当用户单击问题来回答它时，单击回调可以通过 this 访问该问题。另外，当您添加作为答案的新元素时，您可以在其上设置一个“data-question”属性，该属性指向问题的 ID。如果您有这样的问题:

<li class="question" id="question1">
    <span>How to detect nested list id?</span>
    <input type="text" />
    <button class="send-answer" data-questionid="question1">Add Answer</button>
</li>

然后是一些像这样的JavaScript代码

$('.send-answer').click(function (e) {
    e.preventDefault();
    var questionId = $(this).attr('data-questionid');
    var answer = $('#' + questionId).find(input).val();
    var answerElement = $('<span>').text(answer).attr('data-questionid', questionId);
    $('#' + questionId).append(answerElement);
}

将很快为您提供所需的东西。还有一些其他方法可以解决此问题，例如，您可以搜索按钮的父级以查找包含它的类问题的 li，然后从该元素获取 id，而不是将 data-questionid 添加到按钮。