Здравствуйте!
Есть такой код на jQuery:
names = [];
$('#list a').each( function (key, val) {
names.push($(val).text());
});
Каким будет аналог на классическом JavaScript?
Спасибо!
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуЗдравствуйте!
Есть такой код на jQuery:
names = [];
$('#list a').each( function (key, val) {
names.push($(val).text());
});
Каким будет аналог на классическом JavaScript?
Спасибо!
Для того, чтобы написать аналог, нужно предварительно определить - что именно происходит в данном куске кода:
$('#list a')
- выбираются в <a>
внутри элемента с id="list"
.each( function (key, val) {...})
- идет цикл по выбранным элементамnames.push($(val).text());
текст из проверяемого элемента заносится в массивКаждому из этих действий можно найти соответствие:
Пример:
var names = [];
[].forEach.call(document.querySelectorAll('#list a'), function (val, index) {
names.push(val.textContent);
});
Также, как можно заметить, тут идет перевод из одной коллекции в другую, для такой операции отлично подходит метод map
var names = [].map.call(document.querySelectorAll('#list a'), function(el){
return el.textContent;
})
querySelectorAll
- классическим JavaScript'ом? Если уж по классике, то getElementById
и т.д.
26 авг 2016 в 8:13
getElementById
- это не классика, это ретро :)
// JQuery
names = [];
$('#list a').each( function (key, val) {
names.push($(val).text());
});
// pure JS
names2 = [];
document.querySelectorAll('#list a').forEach(function (key, val) {
names2.push(key.textContent);
});
console.log('names:' + names);
console.log('names2:' + names2);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
<li><a href="1">test1</a></li>
<li><a href="2">test2</a></li>
<li><a href="3">test3</a></li>
</ul>
где
querySelectorAll - возвращает список элементов в пределах документа (поиск осуществляется в пределах указанного элемента) которые соответствуют указанной группе селекторов. Возвращает объект типа NodeList.
forEach - выполняет указанную функцию один раз для каждого элемента в массиве.