JS：最后一个输入元素的名称（HTML/PHP）[关闭]答案

【问题标题】：JS: name of last input element (HTML/PHP) [closed]JS：最后一个输入元素的名称（HTML/PHP）[关闭]
【发布时间】：2015-02-10 14:59:55
【问题描述】：

我最好列个清单来说明我想做的步骤：

获取 html-input 的最后一个元素的名称（已通过 PHP 生成）

基本设置如下：

<input type='text'name='E_8' value= '123' />
<input type='text'name='E_9' value= '456' />
<input type='text'name='E_10' value= '789' />
<input type='submit' name='submit' value='Update'/>

将其传递给 JS 函数
附加一些额外的字段（使用部分名称作为新字段的 id

JS 脚本工作正常，我可以添加字段。此外，字段的内容正在由 PHP 脚本处理并写入数据库。

Short：无论有多少字段，我如何获取最后一个值？

编辑：我忘记了有一个提交按钮也会作为最后一个元素出现......对此感到抱歉

【问题讨论】：

你想知道最后一个文本输入的value还是name属性？
你没有贴出JS代码，这就是问题所在。

标签： javascript php jquery html field

【解决方案1】：

有很多方法，但鉴于所有其他答案都依赖于 jQuery 库（这会增加不必要的开销），我将重点展示一些纯 JavaScript 方法（适用于 IE8+ 以上的最新浏览器）。

var allTextInputs = document.querySelectorAll('input[type="text"]'),
    lastInput = allTextInputs[allTextInputs.length - 1],
    lastInputName = lastInput.name;

var allInputsTxt = document.querySelectorAll('input[type="text"]');
var lastInput = allInputsTxt[allInputsTxt.length - 1];
var lastInputName = lastInput.name;
var lastInputValue = lastInput.value;
alert('last input name : ' + lastInputName + '; last input value : ' + lastInputValue);

<input type='text'name='E_8' value= '123' />
<input type='text'name='E_9' value= '456' />
<input type='text'name='E_10' value= '789' />
<input type='submit' name='submit' value='Update'/>

如果您想要的是 value 而不是 name 属性，请在使用与上述相同的方法获取最后一个 @987654325 的名称后执行此操作@：

var lastInputValue = lastInput.value;

这些方法将在代码运行时给出文档中type="text" 中最后一个<input /> 的值；要查找动态添加到文档中的最后一个 <input /> 的值，您需要在插入该元素后重新运行有效方法。

【讨论】：

查看问题中的编辑，在输入列表末尾出现submit 按钮，只有使用querySelectorAll('input[type="text"]') 的替代方法才有效。
OK ...我已经确定了特定部分 (console.log(allInputs[12]);)，它将以下内容打印到控制台 () ...但我该如何从那里继续。一旦我将它传递给变量，我在那里有什么？
@DestructionOfPlanetNeptune allInputsTxt 是一个包含所有 input type="text" 元素的选项卡。 lastInput 变量是您想要的输入。用它做你想做的事：获取 name 属性？ => lastInput.name。获得价值？ => `lastInput.value`，等等。
工作就像一个魅力......我使用lastInput.name 来获取名称，然后使用substring 方法来提取我需要的东西......谢谢......
@DestructionOfPlanetNeptune 没问题。不要忘记将此标记为您的答案。这会让大卫开心；）

【解决方案2】：

jQuery...

var lastInputName = $('input[type="text"]:last').attr('name');

【讨论】：

Hm ... 工作正常，除了结果是提交按钮。但这是我的错误，因为我忘了提到有一个提交按钮。有什么方法可以获取最后一个输入元素？
@DestructionOfPlanetNeptune 我已经进行了更改，现在查看代码。

【解决方案3】：

下面的 jQuery 代码应该可以解决问题。

var lastValue = $("input[type=text]:last").val();

还有 jQuery：

var $inputs = $("input[type=text]");
var lastValue = $inputs[$inputs.length - 1].value;

【讨论】：

【解决方案4】：

使用CSS3 selectors 结合sizzle (jquery) 来定位最后一个元素

var name = $('input[name^=E_]:last')[0].name

【讨论】：

【解决方案5】：

PHP 或 JavaScript 中的最后一个值？在 PHP 中，字段通常作为数组传递，因此您可以使用

获取最后一个值

end($array)

如果你这样命名你的文件就更好了

<input type='text'name='E[8]' value= '123' />
<input type='text'name='E[9]' value= '456' />
<input type='text'name='E[10]' value= '789' />

在 JS 中，你需要将字段放入一个数组并获取最后一个......你需要这样的东西

var myFields = document.forms["myform"].getElementsByTagName('input'),
var lastValue = myFields[(myFields.length-1)].value;

【讨论】：

我通过 PHP 生成网站。我会记住这一点，但这会导致大量代码的修改。也许这可能会使事情变得更加困难，也许不会。我会考虑这个的。

【解决方案6】：

通过将您的代码包装为父元素，让我们说带有属性id="inputs"，这是一个普通的 DOM（无 jQuery）解决方案：

// start by finding the last-most element
var lastInput = document.getElementById('inputs').lastElementChild;
// search backward to the last 'text' element
while (lastInput && lastInput.type !== 'text') {
    lastInput = lastInput.previousElementSibling;
}
// and get its value
var lastValue = lastInput ? lastInput.value : null;

这个解决方案的有趣之处在于不创建数组，因此可以节省一些 JavaScript 内存。 Firefox、Chrome 和 IE 9 应该没问题。

【讨论】：