3

Для того, чтобы задать стили для всех элементов с классом .box на jQuery, достаточно написать следующее:

$('.box').css('background', 'red');

Как реализовать тоже самое на чистом JS? Вот моя не вполне удачная попытка:

function $(selector) {
  var prefix = selector[0];
  var selector = selector.substring(1);

  switch (prefix) {
    case '#':
      return document.getElementById(selector);
    case '.':
      var elem = document.getElementsByClassName(selector);
      for (var i = 0; i < elem.length; i++) {
        return elem[i];
      };

    default:
      return document.getElementsByTagName(prefix + selector);
  }
}



$('.box').style.background = 'red';
<div>
  <p class="box">hello</p>
  <p>world</p>
  <p class="box">000</p>
  <p>111</p>
</div>

Стили применились только к первому элементу с классом .box, хотя я возвращаю эти элементы из цикла ...

JS в процессе изучения, поэтому прошу сильно меня не "ругать"))

4
  • делая return вы покидаете функцию, в данном случае функцию $
    – Grundy
    21 июн 2016 в 8:39
  • Посмотрите тут: javascript.ru/unsorted/top-10-functions#8-getelementsbyclass
    – andy.37
    21 июн 2016 в 8:48
  • 2
    Стоит поступить по аналогии с jQuery и хранить список выбранных элементов внутри, предоставляя к ним доступ с помощью функций
    – Grundy
    21 июн 2016 в 8:56
  • return elem[i]; Возвращает только первый элемент.
    – ilyaplot
    21 июн 2016 в 11:05

2 ответа 2

2

Например, вот так:

var box = document.querySelectorAll('.box');
for (var i = 0; i < box.length; i++) {
    box[i].style.background = 'red';
}
<div>
  <p class="box">hello</p>
  <p>world</p>
  <p class="box">000</p>
  <p>111</p>
</div>

11
  • Cпасибо. Но это очевидное решение, к тому-же не рациональное, т.к. захламляет основной код. Задача вынести это в функцию $(). Пока изучаю информацию из комментария @andy.37 ... Надеюсь, что найду ответ там.
    – Astor
    21 июн 2016 в 8:56
  • @Astor В чём суть захламления-то? Ну сделайте var $ = document.querySelectorAll, если так нравится.
    – Kyubey
    21 июн 2016 в 9:04
  • @Astor, это, кстати, довольно рациональное решение, как минимум разбор селектора передан нативной части
    – Grundy
    21 июн 2016 в 9:25
  • @Discord, подозреваю что не нравится открытый цикл в коде
    – Grundy
    21 июн 2016 в 9:26
  • @Discord, суть захламления в цикле. Если в документе есть только класс .box, то все гуд, а если есть и другие классы? - тогда будет дублирование кода. Кроме того, вопрос был: "выборка элементов на чистом JS". Допускаю, что я не прав))
    – Astor
    21 июн 2016 в 9:26
1

Слишком разные результаты возвращает данная функция:

отдельный элемент, либо коллекция элементов.

Из-за этого нужно либо следить за тем, чтобы с результатом обращались в зависимости от типа, либо скрыть его внутри, выставив наружу нужные функции для работы с выбранными элементами.

Кроме этого проблема в данном коде заключается в том, что обычным return нельзя приостановить выполнение цикла, и потом продолжить его, при использовании return происходит полный возврат из функции, поэтому все остальные элементы теряются.

Если уж брать за основу jQuery, то стоит посмотреть как сделано в нем.

список элементов хранится внутри, и по большому счету доступ к нему осуществляется посредством функций.

Простейшую версию можно реализовать так:

(function(window) {

  var my = function(selector) {
    return new my.fn.init(selector);
  }

  my.prototype = my.fn = {
    version: '0.0.1',
    constructor: my
  };
  //выбираем элементы
  var init = my.fn.init = function(selector) {
    this.context = Array.from(document.querySelectorAll(selector)); //всегда имеем массив элементов
  }
  init.prototype = my.fn;
  my.fn.css = function(cssProperty, cssValue) { // добавляем метод для работы с css
    this.context.forEach(function(el) {
      el.style[cssProperty] = cssValue
    });
    return this;
  }

  return window.my = my;
}(window));

my('.box').css('background', 'red');
<div>
  <p class="box">hello</p>
  <p>world</p>
  <p class="box">000</p>
  <p>111</p>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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