如何通过 id 在 JavaScript 中的元素数组中进行选择答案

【问题标题】：How to select by id in array of elements in JavaScript如何通过 id 在 JavaScript 中的元素数组中进行选择
【发布时间】：2022-01-12 10:04:56
【问题描述】：

我正在为如何在 JavaScript 中简单地选择元素数组中的特定元素而苦苦挣扎。考虑以下几点：

var htmlString = "<span>someText</span><input type='hidden' class='idBox' name='id' data-id='6026' value='6026'>";
var eleArray = $.parseHTML(htmlString);                    
var inputVal = $(eleArray[1]).val();

inputVal 将保存输入字段的值。在这种特定情况下，它将保持 6026.. 但是我不喜欢通过在输入元素eleArray 中选择索引 1 来获取此值的方式。我想通过输入元素 id 来选择它，在这种情况下按类将是 idBox 或名称 id.. 但我不知道该怎么做。

有什么建议吗？

【问题讨论】：

将数组中的元素放到一个文档片段中。
您是否尝试过document.getElementById() 根据其 id 检索您的元素？
@Pochwar 元素不在document 中 - 搜索 DOM 时不会找到它们。

标签： javascript html jquery dom

【解决方案1】：

parseHTML 将为您提供一个可用于 jQuery 的元素数组，因此您可以像添加到 DOM 中的元素一样使用filter：

var htmlString = "<span>someText</span><input type='hidden' class='idBox' name='id' data-id='6026' value='6026'>";
var eleArray = $.parseHTML(htmlString);                    
var inputVal = $(eleArray).filter("[name='id']").val()
console.log(inputVal);

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案2】：

您可以使用class selector 语法：

const htmlString = "<span>someText</span><input type='hidden' class='idBox' name='id' data-id='6026' value='6026'>";
$($.parseHTML(htmlString)).filter(".idBox").val();
// => '6026'

使用输入名称的其他解决方案：

const htmlString = "<span>someText</span><input type='hidden' class='idBox' name='id' data-id='6026' value='6026'>";
$($.parseHTML(htmlString)).filter("input[name='id']").val();

【讨论】：