#javascript #jquery #arrays #zepto
#javascript #jquery #массивы #zepto
Вопрос:
Я использую Zepto.js , облегченный клон jquery. Но эта платформа не использует .data() так же, как jquery. Теперь мне нужно использовать этот код:
var position = new Array;
$('#ipadmenu > section').each(function() {
position.push($(this).data('order'));
});
Но я понятия не имею, как заставить это работать в моей среде.
Как мне преобразовать это в чистый javascript? Я никогда по-настоящему не работал с массивами, поэтому я совсем потерялся … кроме того, мог ли я что-то пропустить в документе zepto (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>
спасибо за вашу помощь!
Комментарии:
1. Небольшая придирка … jQuery — это «настоящий JavaScript».
2.
.pushбудет иметь мало общего с фреймворком, поскольку вы вызываете его в массиве.3. jQuery — это просто предварительно написанные библиотеки кода JavaScript..
4. да, верно, я изменил его на «чистый»: p
5. Я погуглил это, и да, я думаю, это так 🙂
Ответ №1:
Основываясь на моем 30-секундном обзоре документов zepto, это будет выглядеть так.
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'));
});
Комментарии:
1. спасибо за ваш ответ. Doe sit поддерживает данные? Я не знаю, я в замешательстве, не очень хорошо разбираюсь в 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.
Комментарии:
1. прекрасно! по моему мнению, всегда лучше использовать «чистый» javascript! для скорости, конечно! так что спасибо вам за вашу работу.
Ответ №3:
Если вы используете атрибуты data- *, вы можете получить к ним доступ через новый объект dataset, доступный в HTMLElement. 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»), когда вы используете пользовательскую сборку Zepto с модулем «data». Таким образом, вы можете использовать тот же код для jquery и Zepto