通过部分名称或 ID 获取元素答案

【问题标题】：Get element by part of Name or ID通过部分名称或 ID 获取元素
【发布时间】：2013-03-30 06:30:21
【问题描述】：

这是我的表单示例（只有我想要的输入，但还有很多其他输入）：

<form name="inputform" action="..." method="post">
    <input type="hidden" name="id_qtedje_77" id="id_qtedje_77" value="0">
    <input type="text" id="id_qte_77" name="prestation_detail_fields[77][qte_collecte]" value="0.00">
    <input type="text" id="id_rec_77" name="prestation_detail_fields[77][reliquat_conforme]" value="0.00">
    <input type="text" id="id_ren_77" name="prestation_detail_fields[77][reliquat_non_conforme]" value="0.00">
    <input type="checkbox" name="prestation_detail_fields[77][dechet_non_present]" value="1">
    
    <!-- another TR -->
    
    <input type="hidden" name="id_qtedje_108" id="id_qtedje_108" value="0">
    <input type="text" id="id_qte_108" name="prestation_detail_fields[108][qte_collecte]" value="0.00">
    <input type="text" id="id_rec_108" name="prestation_detail_fields[108][reliquat_conforme]" value="0.00">
    <input type="text" id="id_ren_108" name="prestation_detail_fields[108][reliquat_non_conforme]" value="0.00">
    <input type="checkbox" name="prestation_detail_fields[108][dechet_non_present]" value="1">
</form>

我想要的是获取输入的值，但由于表单是用 PHP 构建的，我不知道行标识符 (77, 108)。

有没有办法做类似getElementByName('id_qtedje_%') 的事情？

注意：我没有使用任何库，也不打算使用任何库。

【问题讨论】：

stackoverflow.com/questions/4275071/… 已经有人问过了...希望这会有所帮助 ;)
虽然那里的答案已经过时了。
@Pye：你使用任何库吗？（jQuery、MooTools、闭包、原型...）
document.querySelector('[id^="id_qte_"]')?
我没有使用任何库，也不打算使用任何库。

标签： javascript forms

【解决方案1】：

您可以在jQuery 中使用starts with selector

var listOfElements = $('[name^="id_qtedje_"]')

您可能还对contains 和ends with 选择器感兴趣

使用querySelectorAll，你可以这样做

document.querySelectorAll('[name^="id_qtedje_"]')

或者：

假设所有元素都是inputs，你可以这样使用：

function getElementByNameStart(str) {
    var x=document.getElementsByTagName('input')
    for(var i=0;i<x.length;i++) {
        if(x[i].indexOf(str)==0) {
            return x[i];
        }
    }
}

可以称为getElementByNameStart("id_qtedje_")

请注意，这只返回此类型的 first 元素。全部退回：

function getElementByNameStart(str) {
    var x=document.getElementsByTagName('input')
    var a=[];
    for(var i=0;i<x.length;i++) {
        if(x[i].indexOf(str)==0) {
            a.push(x[i])
        }
    }
    return a;
}

如果元素是任何类型，请将“input”替换为“*”（注意，这可能会使您的代码变慢）

【讨论】：

这是对这个问题的完美回答，我不知道为什么有人投了反对票。真的没有比这更好的方法了。
@marksyzm：我认为这与我最初的（意外）提交有关。查看第一个修订版，我还没有完成输入，我点击了提交按钮。 :S 这没什么大不了的，只是投反对票:)
@marksyzm 因为有人不想要jQuery的问题。

【解决方案2】：

您最好的选择可能是document.querySelectorAll，您可以使用任何CSS 选择器，包括"attribute starts with" selector，如input[id^="id_qtedje_"]。我是supported on all modern browsers, and also IE8：

var elements = document.querySelectorAll('input[id^="id_qtedje_"]');

如果您只想要第一个匹配项（而不是列表），则可以改用 document.querySelector。它返回对文档顺序中第一个匹配项的引用，如果没有匹配项，则返回 null。

或者，您可以给元素一个类名，然后使用document.getElementsByClassName，但请注意，虽然旧版本的 Chrome 和 Firefox 支持 getElementsByClassName，但 IE8 没有它，所以它是 not as well-supported在现代更有用的querySelectorAll。

var elements = document.getElementsByClassName("theClassName");

如果您使用任何库（jQuery、MooTools、Closure、Prototype 等），它们很可能具有您可以使用几乎任何 CSS 选择器来查找元素的功能，从而填补浏览器支持方面的空白他们自己的代码。例如，在 jQuery 中，它是 $ (jQuery) 函数；在 MooTools 和 Prototype 中，它是 $$。

【讨论】：