Question

我正在使用Zepto.js，一个轻量级的jquery克隆。但是该框架不像jquery那样使用.data（）。现在我需要使用这段代码：

var position = new Array;
$('#ipadmenu > section').each(function() {
    position.push($(this).data('order'));
});

但我不知道如何在我的框架上完成这项工作。我如何将其转换为纯JavaScript？我从来没有真正使用过数组，所以我很丢失...另外，我是否可以在zepto doc（https://github.com/madrobby/zepto）中跳过一些可以帮助我的东西？ .get（）例如？

这是HTML代码。基本上我想将所有部分（金额可以更改）添加到数组中：

<nav id="ipadmenu">
    <section data-order="0">
        <a><p>text</p></a>
    </section>
    <section data-order="1">
        <a><p>text</p></a>
    </section>
</nav>

谢谢你的帮助！

Answer 1

根据我对zepto文档的30秒回顾，它看起来像这样。

var position = new Array;
$('#ipadmenu > section').each(function() {
    position.push($(this).data('order'));
});

您链接的zepto文档说它支持您的代码段中的所有jquery方法。

它处理的数据怎么样？如果它真的不能处理data同样它也支持attr所以你可以说：

var position = new Array;
$('#ipadmenu > section').each(function() {
    position.push($(this).attr('data-order'));
});

Answer 2

这里有另一种“纯粹的”javascript解决方案：

var position = [];
var aSections = document.getElementById('ipadmenu').childNodes;
for (iIndex in aSections) {
    if (aSections[iIndex].nodeName == 'SECTION') {
        position.push(aSections[iIndex].getAttribute('data-order'));
    }
}

另见jsfiddle。

=== UPDATE ===

一个小小的解决方案：

var position = [];
var aSections = document.getElementById('ipadmenu').getElementsByTagName('SECTION');
for (i = 0; i < aSections.length; i++) {
    position.push(aSections[i].getAttribute('data-order'));
}

这里有新的jsfiddle。

Answer 3

如果您正在使用data- *属性，则可以通过HTMLElement中提供的新dataset对象访问它们。 dataset是一个StringMap对象，因此您可以使用camel cased属性名作为键来访问这些值。如果数据集不可用（如果浏览器不兼容HTML5或浏览器中未实现数据集规范），则可以使用常规属性检索方法访问该属性。

所以，如果你有：

<script type="text/javascript">
var dataSet = document.getElementById("input1").dataset;
for(var key in dataSet) {
    console.log("attribute is: " + key);
    console.log(dataSet[key]);
}
</script>
<input type="text" id="input1" data-custom-attribute="some value"/>

Answer 4

当您使用带有"data"模块的自定义构建Zepto时，Zepto支持$（elem）.data（＆＃34; attr-name＆＃34;）方法。因此，您可以将相同的代码用于jquery和Zepto

Zepto通过.data（）支持data- *属性

4 个答案: