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中的最後一個孩子

回答

相關問題