使用 jQuery 属性前缀选择器使用 localStorage 值填充表单答案

【问题标题】：Populate Form with localStorage Values Using jQuery Attribute Prefix Selector使用 jQuery 属性前缀选择器使用 localStorage 值填充表单
【发布时间】：2014-04-17 00:30:15
【问题描述】：

我通过对 JSON 数据进行字符串化（它们）并使用 localStorage 来保存它。我将数据重新创建为对象，并尝试将对象转换为可以填充 HTML 表单的值，但未成功。以下 jQuery sn-p 遍历我存储的值并在控制台中精确输出我想要的内容：

$(document).ready(function(){
        var test01stuff = $.parseJSON(localStorage.getItem("test01Info"));
                   $.each(test01stuff, function(i,item){
                        $.each(item, function(name,value){
                            console.log(name + ":" + value);
                            $( "id[name|='" + name + "']" ).val( value );
                        });
                    });
    });

这绝对可以正确地迭代像这样的对象：

{
    "test01Info": [
        {
            "test01_Num": "4",
            "test01_Length": "387",
            "test01_Depth": "23"
        }
    ]
}

例如，像 test01_Length:387 这样的名称/值对在控制台中可以正常显示，我所有其他存储的值也是如此。但是尝试在下一行中使用 jQuery 的属性前缀选择器来填充我的 HTML，其中包含以下基本内容：

<form id='test01form'>
  <input type='number' name='testy' id='test01_Length' min='0' max='999' data-role='none'>
</form>

每次都失败 - 输入保持空白，但控制台中没有抛出错误。我在这里错过了什么？

【问题讨论】：

你为什么要使用starts-with属性选择器？ $( "#" + name ).val( value ); 不够吗？您当前的选择器正在寻找一个 id 元素（这没有意义），它的 name 属性包含 test01_Length。
我无法说出一个属性为您带来的“意义”，但是像 $( "name[name|='" + name + "']" ) 这样的东西对于具有给定名称而不是 id 的表单元素也具有相同的非结果。在很多情况下，我不知道 JSON 会传递给我什么，但我会知道前缀。在任何情况下，这也应该适用于精确的字符串，根据 jQuery 的 API 文档：“描述：选择具有指定属性的元素，其值等于给定字符串或以该字符串开头，后跟连字符（- )。”
a[b|="c"] 在表单中查找元素； <a b="d">xxx</a>，其中d 包含（或者是）c。一个有效的用例是$('input[name|="foo"])，它将匹配<input name="barfoobar" />。因此，您帖子中的代码将尝试匹配 <id name="test01_Length" /> 之类的内容（注意 id 元素标签）。
...您的 HTML 具有带有 testy 的 name 属性，而您的选择器的 [name|="' + name + '"] 部分（名称 = test01_Length）将不匹配。这是您的 id 属性，是 test01_Length，所以请尝试使用$( "[id|='" + name + "']" ).val( value );。
很高兴你能深入了解它；）。

标签： jquery json forms attributes local-storage

【解决方案1】：

@Matt 实际上在上面回答了它，但我不能将他的评论指定为答案。我有：

$( "id[name|='" + name + "']" ).val( value );

当我需要时：

$( "[id|='" + name + "']" ).val( value );

【讨论】：