Javascript 确保元素id属性是独立的

我就是搞不懂逻辑，也许我想得太多了

在将脚本附加到DOM中之前，我需要确保脚本的

id

属性是唯一的

以下是一些示例，向您展示我需要什么：

如果在

元素中，我有3个子

脚本

元素，比如：

<script id="script-0"></script>
<script id="script-1"></script>
<script id="script-2"></script>

<script id="script-0"></script>
<script id="script-2"></script>
<script id="script-3"></script>

我希望我的新

script

元素的

id

为

“script-1”

或

“script-4”

在这种情况下：

<script id="script-1"></script>
<script id="script-2"></script>

我希望我的新

script

元素的

id

为

“script-0”

或

“script-3”

只要每个脚本元素的

id

属性是唯一的

在这个场景中，每个

script

元素实际上都在执行一个JSONP请求，因此，由于它是异步的，另一个

script

元素可能会临时添加到

DOM

，并且需要它自己唯一的

id

JSONP请求收到响应后，它将从

DOM

中删除，因此

id

中会出现间隙，例如

script-0

、

script-1

、

script-3

、

script-4

和

script-6

，由于JSONP请求

script-2

和

script-5

可能已收到响应并已从

DOM

中删除。在这种情况下，我希望一个新的

script

元素具有

id

script-2

、

script-5

，或者，最坏的情况是：

script-7

我希望这足够清楚

我就是搞不懂逻辑，任何帮助都将不胜感激

哦，只有香草JS；没有jQuery等，谢谢

---

我保证在Stackoverflow上发布一个问题的答案，每个答案都是为了回答这个问题！答应我

您可以这样做：

var scripts = document.getElementsByTagName('script'); // we're getting all scripts from page
var ids = [];
for (i in scripts) {  // iterate by them
    var id = scripts[i].id;  // take 'id' attribute from current script 
    if (id && id.match(/script-\d+/)) {  // check if id matches 'script-...' pattern
        ids.push( parseInt(id.substring(id.indexOf('-')+1),10) );  // take only nomber and convert it to a decimal number, push this number to ids array
    }
}
ids = ids.sort(function(a,b){return a > b;});  // sort array ASC
var lastId = ids.pop();   // take the last value from array

---

是否真的有必要填补这些空白

我可以想象保持一个运行的计数器，然后增加它会更容易使用，特别是考虑到您最多可以有唯一的JSONP请求：

var requestJSONP = (function () {
    var guid = 0;

    return function (url) {
        var id = 'script-' + guid++;

        var script = document.createElement('script');
        script.id = id;
        script.src = url;
        script.type = 'text/javascript';

        script.onload = function () {
            this.parentNode.removeChild(this);
        };

        document.getElementsByTagName('head')[0].appendChild(script);

        return id;
    };
})();

闭包是可选的，但它将防止任何其他脚本更改

guid

例如：

var scriptId = requestJSONP('/request/resource?callback=handler');

---

太好了，谢谢你！你能不能扩展一下每个部分的实际功能，这样我就知道它是如何工作的，而不仅仅是复制代码！那将是一个很大的帮助！调用之间的

guid

是否持久？我本以为它是

requestJSONP

函数中定义的变量，每次调用

requestJSONP

函数时，它都会重置为

0

？此外，如果在DOM中的

head

元素中有一个脚本元素，由于某种原因（无论可能性有多大），该元素被称为

script-0

，那么该代码将对此一无所知，并创建一个具有重复的

id

的脚本元素。如果我已经阅读并理解了你的代码，对吗？非常感谢您迄今为止的帮助！抱歉，澄清一下：如果在调用

requestJSONP

之前，DOM中有一个id为

script-0

的脚本元素，那么代码将对此一无所知，并使用重复的

id

向DOM追加一个新的脚本元素。如果我正确理解了你的代码。也许我不够清楚，或者只是没有足够快地掌握代码的逻辑。谢谢你的帮助@JonathonDavidOates是的，它会持续下去。但是，它不是在

requestJSONP

中定义的，而是在闭包中的它旁边定义的。（它实际上是由

返回函数（）{…}

定义的）。但是，是的，如果已经使用

id=“script-0”

创建了另一个

，则

guid

将与之冲突，从而创建一个重复的id。最简单的解决方案是选择一个不同的前缀，而不是

“script-”

，该前缀也仅在

requestJSONP

@jonathondavites中使用，如果您对闭包不太熟悉，可以了解闭包，也可以在上了解闭包。为了确保第一次运行

requestJSONP

时，我可以检查头部是否已经有脚本元素，然后开始计数？我还可以在第一次运行时创建一个随机数，并使用它作为所有JSONP脚本的前缀，例如：

5267364547-3

而不是

script-3

？