Question

我是编程初学者，遇到问题。我想找到父（表单）的最后一个子元素（元素）。然后我想在最后一个子项之后插入一个输入元素，但它应该在表单内部而不是在表单之后（外部）。表单可能包含输入元素以及select元素。怎么做到了？我尝试了以下方法但不幸的是它们不起作用。

var lastRepeatingGroup = $('.form-to-be-submitted:last');  // this one gives me the whole form meaning if I add something it will added at the end of the form
var lastRepeatingGroup = $('.form-to-be-submitted input:last'); //this gives me the last input element
var lastRepeatingGroup = $('.form-to-be-submitted input select').last();  //this does nothing, I think its an error

$newSection = $('<input type="button" value="newbutton" name="mybutton"/>');
newSection.insertAfter(lastRepeatingGroup);    // when I use this statement it adds after the form not inside the form

Answer 1

这应该有效：

$('.form-to-be-submitted').children().last()

.children()会选择表单中的所有子项以及.last()过滤器，以便进一步选择最后一个孩子。

要在该元素之后插入内容，只需使用.after()，如：

$('.form-to-be-submitted').children().last().after('<input>')

示例：

$('.form-to-be-submitted').children().last().after('<input type="radio">')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-to-be-submitted">
  <input type="text">
  <input type="radio">
  <input type="checkbox">
  <select>
<option></option>
</select>
</form>

Answer 2

所以你只需要一些关于CSS Selectors和Jquery方法的指导。

首先让我们看一下：

表单可能包含输入元素以及select元素。

所以在CSS中要做or，你需要使用逗号：

input,select

如果您正在寻找直系后代，则需要使用>

form > input, form > select

然后将它们包装在jquery中：

$('form > input, form > select')

产生所有项目，因此我们使用last()来获取最后一个元素：

var $last = $('form > input, form > select').last();

（如果您不需要>只是将其删除）。

这非常接近：

var lastRepeatingGroup = $('.form-to-be-submitted input select').last();

但是它正在该类的输入元素中寻找一个select元素。只是需要一点调整：

var lastRepeatingGroup = $('.form-to-be-submitted input, .form-to-be-submitted select')
  .last();

如果要在特定元素的末尾插入元素，则无需查找最后一项。只需使用jquery's append

即可

除了：

考虑以下HTML：

<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

您可以创建内容并一次将其插入多个元素中：

$( ".inner" ).append( "<p>Test</p>" );

每个内部元素都会获得这个新内容：

<h2>Greetings</h2>
<div class="container">
  <div class="inner">
    Hello
    <p>Test</p>
  </div>
  <div class="inner">
    Goodbye
    <p>Test</p>
  </div>
</div>

Answer 3

不需要JQuery。要在表单结尾之前插入新元素，只需使用 .appendChild() 。

＆＃13;

var frm = document.getElementById("theForm");  // Get reference to form

// Create a new element and configure it
var newElement = document.createElement("input");
newElement.id = "txtUser";

// Simply append it to the form.
frm.appendChild(newElement);

console.log(frm.elements[frm.elements.length-1]);  // Get last element in form

＆＃13;

<form id="theForm">
  <input type="text">
  <select>
    <option>one</option>
    <option>two</option>
    <option>three</option>    
  </select>
  
  <button type="button">Click Me</button>
</form>

＆＃13;

获取表单jquery的最后一个元素

3 个答案: