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

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

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 
}); 
});

来源

2013-06-25 Josh Luke Blease

“.AddAns”按钮在哪里？ –

@ Karl-AndréGagnon在问题输入框 –

使用此：

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

与您的代码有关的问题是，您正在选择每个MCAns并采取最后一个。您应该点击最后的.formRow添加按钮。

来源

2013-06-25 18:02:28

这个工作很完美，谢谢！ –

使用该代码：

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

检查jsfiddle

来源

2013-06-25 17:56:52 YD1m

之后的第一个formRight类中，这不起作用，对不起，它将新选项添加到多个元素。 –

我修好了，看看js小提琴 – YD1m

您可以尝试首先获取容器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 
    }); 
});

来源

2013-06-25 18:05:50

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

回答

相关问题