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

Question

我是编程初学者，遇到了一个问题。我想找到父级(表单)的最后一个子级(元素)。然后我想在最后一个子元素之后插入一个输入元素，但它应该位于表单内部而不是表单之后(外部)。该表单可能包含输入元素以及选择元素。如何实现呢？我尝试了以下方法，但遗憾的是它们不起作用。

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

因此，您只需要一些有关 CSS 选择器和 Jquery 方法的指导。

首先让我们看一下:

The form might contain input elements as well as select elements.

因此，在 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(); 

但它正在该类的输入元素中查找选择元素。只需要一点调整:

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>