Zepto 通过 .data() 支持 data-* 属性答案

【问题标题】：Zepto support for data-* attributes through .data()Zepto 通过 .data() 支持 data-* 属性
【发布时间】：2011-12-12 21:21:43
【问题描述】：

我正在使用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>

感谢您的帮助！

【问题讨论】：

有点吹毛求疵... jQuery 是“真正的 JavaScript”。
.push 与框架关系不大，因为您是在数组上调用它。
jQuery 只是预先编写的 JavaScript 代码库..
是的，我把它改成了“纯”：p
我用谷歌搜索了它，是的，我猜它是:)

标签： javascript jquery arrays zepto

【解决方案1】：

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

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

您链接到的 zepto 文档说它支持您的 sn-p 中的所有 jquery 方法。

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

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

【讨论】：

感谢您的回答。坐支持数据吗？我不知道我很困惑，不是很擅长 javascript。试图阅读这两个文档，他们说了不同的内容，我的代码没有执行。我想我当时又犯了一个错误。谢谢你的帮助，我也会试试 attr :)。

【解决方案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。

=== 更新 ===

小一点的解决方案：

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

这里是新的jsfiddle。

【讨论】：

可爱！在我看来，使用“纯”javascript总是更好！当然是为了速度！所以谢谢你的工作。

【解决方案3】：

如果您使用 data-* 属性，那么您可以通过 HTMLElement 中可用的新 dataset 对象访问它们。 dataset 是一个 StringMap 对象，因此您可以使用驼峰式属性名称作为键来访问这些值。如果数据集不可用（如果浏览器不兼容 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"/>

【讨论】：

【解决方案4】：

Zepto 支持 $(elem).data("attr-name") 方法，当您使用带有 "data" 模块的 Zepto 的自定义构建时。所以，你可以对 jquery 和 Zepto 使用相同的代码

【讨论】：