如何遍历具有相同前缀的 id答案

【问题标题】：How to loop through ids with same prefix如何遍历具有相同前缀的 id
【发布时间】：2012-10-15 22:08:51
【问题描述】：

我有这部分代码可以根据列表项的 ID 号在单击时将列表项保存到 localStorage。然后，我可以在不同的页面上加载保存的任何列表项。

var save1075 = $('#store-1075').get(0);
$('#store-1075').on('click', function () { 
    var storeStorageKey1075 = $(this).attr('id'); 
    localStorage.setItem('storeStorageKey1075', $(this).attr('id'));
    localStorage.setItem('storeStorageKey1075', this.innerHTML);
});

if ( localStorage.getItem('storeStorageKey1075') ) {
save1075.innerHTML = localStorage.getItem('storeStorageKey1075'); 
}

var storeStorageKey1075 = $(this).attr('id');
    if ( localStorage.getItem('storeStorageKey1075') ) {
    storeStorageKey1075 = localStorage.getItem('storeStorageKey1075');

}

现在我必须为每个单独的 id 号重复该代码块，我试图将 id 号改为一个变量，在单击时循环遍历所有可能的 id 号，但只保存那个特定的 id。也许是这样的：

var id = //some sort of loop or array of possible ids.
var save = $('#store-'+id).get(0);
$('#store-'+id).on('click', function () { 
    var storeStorageKey = $(this).attr('id'); 
    localStorage.setItem('storeStorageKey', $(this).attr('id'));
    localStorage.setItem('storeStorageKey', this.innerHTML);
});

if ( localStorage.getItem('storeStorageKey') ) {
save.innerHTML = localStorage.getItem('storeStorageKey'); 
}

var storeStorageKey = $(this).attr('id');
    if ( localStorage.getItem('storeStorageKey') ) {
    storeStorageKey = localStorage.getItem('storeStorageKey');

}

每个列表项都有相同的前缀“store-”，并且数字没有特定的顺序，而是在每次创建新的商店位置时随机生成。

【问题讨论】：

你为什么将localStorage中的storeStorageKey设置为id，然后他们立即用innerHTML覆盖它？

标签： javascript arrays variables loops local-storage

【解决方案1】：

显而易见的做法是添加一个类，但您也可以：

var elems = $( "[id^='store']")

elems.on( "click", function() {//Save html on click
    localStorage.setItem( this.id, this.innerHTML );
});

    //Retrieve html
elems.each( function() {
    var html = localStorage.getItem( this.id );

    if( html ) {
        $(this).html( html );
    }
});

【讨论】：

或者使用，name 属性（所以不要与 CSS 混合）
id 在这种情况下与样式无关。
Esailija 说“显而易见的事情就是添加一个类”，我只是添加或name。在这种情况下，我们不知道class 是否用于样式设置。哎呀，我们不知道是id 还是name！
+1。作为旁注，我建议尽可能使用element[id^='prefix']，例如div[id^='store']，以获得性能优势。
@PimpTrizkit names 是可怕的 imo，没有简写选择器，也没有对多个名称的内置支持。您可以在一个元素上有多个类并根据一个类进行选择。以class="js-item red blue" 和$(".js-item") 为例

【解决方案2】：

这会遍历所有以storeStorageKey开头的键：

for (var i=0; i<localStorage.length; i++) {
    var key = localStorage.key(i);
    if (/^storeStorageKey/.test(key)) {
        var item = localStorage.getItem(key);
        // do something with item
    }
}

【讨论】：

【解决方案3】：

我建议不要在 id 中使用前缀，而是添加一个类来指示一个项目是可存储的：

<div class="storable" id="store-1234">...</div>

然后你可以使用类一次性选择所有可存储的东西：

$('.storable').on('click', function () { 
    var storeStorageKey = $(this).attr('id'); 
    ...
});

【讨论】：