在Firefox和MS浏览器中，jquery返回的数据项顺序是不同的
在Firefox和MS浏览器中，jquery返回的数据项顺序是不同的
提问于 2017-09-15 06:04:11
我们有一个惯例，我们需要在一组数据项元素中读取第一个数据项，但是我们发现firefox对数据项进行排序，所以您不能依赖返回的第一个数据项。
var x = $("#x").data();
var y = "";
for (k in x) {
y += k + "=" + x[k] + ", ";
}
$("#x").text(y);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="x" data-xfirst="1" data-asecond="2">
</div>
如果您在Edge或IE中运行此命令，您将“正确地”先获得xfirst。如果您在firefox中运行它，您将获得第二名。
编辑:刚在Chrome中尝试过，它的行为与FF相同
如何按照这些数据属性放在DOM中的顺序来处理这些数据属性？
谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-09-15 06:55:29
data()方法返回一个对象，它只是键值对的集合--它们是如何存储和迭代的--不能保证它们的顺序与索引数组一样，并且在浏览器/JS引擎之间也会有所不同。让它适合你的特殊情况只是偶然。
我认为您需要做的是使用outerHTML分析元素的字符串。我相信这个字符串将包含显示在DOM中的数据属性(请跨浏览器进行测试)。然后，您只需要找到data-属性的第一次出现。使用string的indexOf()方法(或者使用正则表达式)非常简单：
const elemStr = document.getElementById('x').outerHTML;
const dataIndex = elemStr.indexOf('data-');
let quoteIndexes = [-1, -1];
// This is the first occurance of a data attribute
if (dataIndex > -1) {
// Find the opening and end quote indexes of the data attribute value
quoteIndexes[0] = elemStr.indexOf('"', dataIndex);
quoteIndexes[1] = elemStr.indexOf('"', quoteIndexes[0]+1);
if (quoteIndexes[0] > -1 && quoteIndexes[1] > -1) {
console.log(`First data attribute: ${elemStr.substring(dataIndex, quoteIndexes[1]+1)}`);
console.log(`Key: ${elemStr.substring(dataIndex+5, quoteIndexes[0]-1)}`);
console.log(`Value: ${elemStr.substring(quoteIndexes[0]+1, quoteIndexes[1])}`);
}
}<div id="x" style="width:100px;" data-name="test" data-class="foo" data-type="bar" class="some classes"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46241495
复制相关文章
相似问题
腾讯云开发者
