Question

我想开发一个Web应用程序，您可以在其中指定问题，然后提供多个答案的选择。我需要在单击加号按钮时添加额外的答案“框”，但仅添加到特定的formRow（请参阅代码）。我已经尝试了JQuery的最后一个函数，但它总是在id = 4的答案框之后添加。

HTML：

<div class="formRow">
                <a href="#" title="" class="Remove smallButton" style="float:right;"><img src="images/icons/color/cross.png" alt="" /></a>
                <label>Multiple Choice: </label>
                <div class="formRight" style="height:28px;">Question1: <input type="text" class="MCQuestion" QID="'+QID+'" /><a href="#" title="" class="AddAns smallButton" style="margin-left:5px;padding: 1px 3px;"><img src="images/icons/color/plus.png" alt="" /></a></div>
                <div class="formRight MCAns" id="1">Answer 1: <input type="text" class="MCAnswer"/><a href="#" title="" class="DelAns smallButton" style="margin-left:5px;padding: 1px 3px;"><img src="images/icons/color/cross.png" alt="" /></a></div>
                <div class="formRight MCAns" id="2">Answer 2: <input type="text" class="MCAnswer"/><a href="#" title="" class="DelAns smallButton" style="margin-left:5px;padding: 1px 3px;"><img src="images/icons/color/cross.png" alt="" /></a></div>
                <div class="clear"></div>
            </div>
            <div class="formRow">
                <a href="#" title="" class="Remove smallButton" style="float:right;"><img src="images/icons/color/cross.png" alt="" /></a>
                <label>Multiple Choice2: </label>
                <div class="formRight" style="height:28px;">Question2: <input type="text" class="MCQuestion" QID="'+QID+'" /><a href="#" title="" class="AddAns smallButton" style="margin-left:5px;padding: 1px 3px;"><img src="images/icons/color/plus.png" alt="" /></a></div>
                <div class="formRight MCAns" id="3">Answer 1: <input type="text" class="MCAnswer"/><a href="#" title="" class="DelAns smallButton" style="margin-left:5px;padding: 1px 3px;"><img src="images/icons/color/cross.png" alt="" /></a></div>
                <div class="formRight MCAns" id="4">Answer 2: <input type="text" class="MCAnswer"/><a href="#" title="" class="DelAns smallButton" style="margin-left:5px;padding: 1px 3px;"><img src="images/icons/color/cross.png" alt="" /></a></div>
                <div class="clear"></div>
            </div>

的Javascript

$(document).ready(function() {
$("body").on("click", ".AddAns", function(event) {
    $(".MCAns").last().after("New Answer Optition"); //Tried this first
    $(".MCAns :last-child").after("New Answer Optition"); //Then this
});
});

Answer 1

使用该代码：

$(document).ready(function() {
$("body").on("click", ".AddAns", function(event) {
    $('.formRow').find('.MCAns').last().after("New Answer Optition");
});
});

检查jsfiddle

Answer 2

使用此：

$(document).ready(function() {
    $("body").on("click", ".AddAns", function(event) {
        $(this).closest('.formRow').find('.MCAns').last().after("New Answer Optition");
    });
});

您的代码存在的问题是您选择的每个MCAns并选择最后一个。您应该点击最后一个.formRow添加按钮。

Answer 3

您可以先尝试获取容器formRow，然后根据需要添加任意数量的代码。这是代码：

$(document).ready(function() {
  $("body").on("click", ".AddAns", function(event) {
      var parent = $(this).parents('.formRow'); // Find the container .formRow first
      parent.find('.MCAns:last').after("New Answer Optition"); // Add new content after last one
  });
});

JQuery在给定的div中找到最后一个孩子

3 个答案: