1

Здравствуйте!

Есть такой код на jQuery:

names = [];
$('#list a').each( function (key, val) {
    names.push($(val).text());
});

Каким будет аналог на классическом JavaScript?
Спасибо!

1
  • Можно поинтересоваться, а зачем? jQuery стал слишком тяжелым для вашего проекта? 26 авг 2016 в 8:09

2 ответа 2

5

Для того, чтобы написать аналог, нужно предварительно определить - что именно происходит в данном куске кода:

  1. $('#list a') - выбираются в <a> внутри элемента с id="list"
  2. .each( function (key, val) {...}) - идет цикл по выбранным элементам
  3. names.push($(val).text()); текст из проверяемого элемента заносится в массив

Каждому из этих действий можно найти соответствие:

  1. document.querySelectorAll - для выборки
  2. любой цикл: for, forEach и т.д.
  3. textContent, innerText, innerHTML - для получения содержимого элемента.

Пример:

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;
})
5
  • Только вот можно ли считать код с querySelectorAll - классическим JavaScript'ом? Если уж по классике, то getElementById и т.д. 26 авг 2016 в 8:13
  • @Astronavigator, конечно можно - это стандартный механизм, для него не нужно дополнительных библиотек
    – Grundy
    26 авг 2016 в 8:18
  • "стандартный" - это еще не значит "классический" :). Насколько я понимаю, эта функция довольно новая. Хотя, может быть, теперь любой JavaScript называют классическим.... 26 авг 2016 в 8:25
  • @Astronavigator, классический - это без использования библиотек
    – Grundy
    26 авг 2016 в 8:27
  • 1
    @Astronavigator, getElementById - это не классика, это ретро :)
    – user207618
    28 авг 2016 в 6:46
3

// 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 - выполняет указанную функцию один раз для каждого элемента в массиве.

2
  • а я вперед :-P и еще и с объяснением :-)
    – Grundy
    26 авг 2016 в 8:10
  • @Grundy умница дочка %) 26 авг 2016 в 8:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.