如何在页面中搜索特定ID并将其与Javascript中的变量相匹配？

我有一个字符串集合，我想从中选择，以便将文本插入页面

字符串存储在对象/数组中，如下所示：

var strings = {
    x01: 'Hello world',
    x02: 'Goodbye world'
    x03: 'The quick brown fox',
    x04: 'jumped over'
    x05: 'the lazy dog',
    x06: 'the fat lady sung'
};

在我的HTML中，我有span标记，它们的ID对应于上面的变量

但是，在任何一个页面上，在任何时候都只会显示部分跨距。例如，可能只有三个：

<span id="x01"></span>
<span id="x04"></span>
<span id="x06"></span>

尽管在谷歌上做了一些搜索，我还是坚持两点。我不知道如何从页面中收集所需的span ID，而且我也不知道一旦获得它们后如何匹配它们

是的，我对Javascript有点不在行，所以请温和地解释一下

谢谢您的建议。

此功能：

$('span[id^="x"]').each( // selects all span elements whose id starts with an x
    function(i){
        $(this).text(strings[this.id]);
    });

---

编辑了添加了一个简单的JavaScript解决方案（我不能发誓我看到了一个最初的……叹息）：

var elems='span'；
var span=document.getElementsByTagName（elems）；
对于（i=0；i这是有效的：

$('span[id^="x"]').each( // selects all span elements whose id starts with an x
    function(i){
        $(this).text(strings[this.id]);
    });



编辑了添加了一个简单的JavaScript解决方案（我不能发誓我看到了一个最初的……叹息）：

var elems='span'；
var span=document.getElementsByTagName（elems）；
对于（i=0；i

因此，不使用jquery，您可以执行类似的操作

将一个类添加到所有可以找到它们的元素中

<span class="fill-me" id="x01"></span>
<span class="fill-me" id="x04"></span>
<span class="fill-me" id="x06"></span>


因此，不使用jquery，您可以执行类似的操作

将一个类添加到所有可以找到它们的元素中

<span class="fill-me" id="x01"></span>
<span class="fill-me" id="x04"></span>
<span class="fill-me" id="x06"></span>

下面是一个纯（而且非常简单）的JavaScript解决方案。该解决方案避免了收集页面上的所有跨度（效率不高），并且仅通过ID获取元素

HTML:

<span id="x01"></span>
<span id="x04"></span>
<span id="x06"></span>

var strings = {
    x01: 'Hello world',
    x02: 'Goodbye world',
    x03: 'The quick brown fox',
    x04: 'jumped over',
    x05: 'the lazy dog',
    x06: 'the fat lady sung'
};

for (var key in strings) {
    var obj = document.getElementById(key);

    if(obj)
        document.getElementById(key).innerHTML = strings[key];
}

下面的。
是一个纯（而且非常简单）的JavaScript解决方案。该解决方案避免了收集页面上的所有跨度（效率不高），并且仅通过ID获取元素

HTML:

<span id="x01"></span>
<span id="x04"></span>
<span id="x06"></span>

var strings = {
    x01: 'Hello world',
    x02: 'Goodbye world',
    x03: 'The quick brown fox',
    x04: 'jumped over',
    x05: 'the lazy dog',
    x06: 'the fat lady sung'
};

for (var key in strings) {
    var obj = document.getElementById(key);

    if(obj)
        document.getElementById(key).innerHTML = strings[key];
}

以下是。
无需在文档中“搜索”您的ID。您的代码基本上是正确的，只需省去第一行并使用循环的
键
变量：

for (var key in strings)
{
   document.getElementById(key).innerHTML = strings[key];
}

H但是，如果具有其中一个ID的元素不存在，则此操作将中断，因此最好进行检查：

for (var key in strings)
{
   var element = document.getElementById(key);
   if (element)
       element.innerHTML = strings[key];
}

无需在文档中“搜索”您的ID。您的代码基本上是正确的，只需省去第一行并使用循环的
键
变量即可：

for (var key in strings)
{
   document.getElementById(key).innerHTML = strings[key];
}

H但是，如果具有其中一个ID的元素不存在，则此操作将中断，因此最好进行检查：

for (var key in strings)
{
   var element = document.getElementById(key);
   if (element)
       element.innerHTML = strings[key];
}

您可以使用此选项检查元素是否存在：

if（document.getElementById（'x01'））{
//代码
}

如果元素太多而无法使用，则可以为所有元素指定相同的名称，如

<div id="x01" name="xx"></div>
<div id="x02" name="xx"></div>

获取页面上的所有div。
您可以使用此选项检查元素是否存在：

if（document.getElementById（'x01'））{
//代码
}

如果元素太多而无法使用，则可以为所有元素指定相同的名称，如

<div id="x01" name="xx"></div>
<div id="x02" name="xx"></div>

获取页面上的所有div。
我认为这是一个过于复杂的解决方案。所需元素的ID存储在
字符串中
，不需要按类名收集所有元素。我认为这个问题没有多少上下文，但这种样式更适合我通常面临的问题。但是，在您的示例中，您拥有所有元素元素的ID。我认为这是一个过于复杂的解决方案。所需元素的ID存储在
字符串中
，不需要按类名收集所有元素。我认为这个问题没有上下文，但这种样式更适合我通常面临的问题。但是在您的示例中，您拥有e元素。在元素上循环不是不必要的缓慢和复杂吗？或者我看不到在数据上循环有什么优势吗？@RoToRa：不，你完全正确，我的方法是较慢的；但是当我意识到这个问题没有用jQuery标记并在当前的香草版本中编辑时，JS已经发布了他的版本在上，我无法对其进行改进，也无法添加任何内容来进一步改进我的答案。此外，请参阅我对他的答案的评论。到目前为止，他的方法更好。=）在元素上循环不是不必要的缓慢和复杂吗？还是在数据上循环有我看不到的优势？@RoToRa：不，你完全正确，我的方法是较慢的；但是当我意识到这个问题没有用jQuery标记并在当前的香草版本中编辑时，JS已经发布了他的版本，我已经发布了他的版本无法真正改进，也无法添加任何内容来进一步改进我的答案。此外，请参阅我对他的答案的评论。他的方法是迄今为止更好的方法。=）这确实比我的尝试更优雅、更有效+1=）啊，我知道你在那里做了什么。您不必首先尝试收集跨度并查看它们是否匹配，而是遍历字符串变量并进行匹配。酷。。。但假设我有1000个字符串（我没有，但如果我有…）。这会对CPU造成冲击吗？还是说它无关紧要？@DaveMG，只有测试才能真正回答这个问题。如果您需要执行您正在尝试的操作，那么这里有一条底线：如果您有200个字符串，并且（可能）有200个ID来匹配它们，那么所需的时间并不重要。如果你需要这样做，你需要这样做。是一个很好的网站，可以让你测试实现目标的多种方法，并为每种方法提供性能报告。虽然我没有测试过任何其他方法，但我想不出比我发布的方法更有效的方法。我想我只是问了一下，因为页面上的跨距数几乎肯定总是可用字符串数的十分之一左右。这就是为什么我最初想先尝试获取跨距，因为这样我将平均遍历阵列20次，而不是始终遍历200次。还是。。