Перебор массива, объекта и элементов в jQuery

Александр Мальцев
Александр Мальцев
175K
54
Перебор массива, объекта и элементов в jQuery
Содержание:
  1. Цикл each (jQuery.each). Примеры использования
  2. Перебор текущих элементов (.each)
  3. Комментарии

Статья, в которой рассмотрим на примерах использование функции и метода библиотеки jQuery each.

В библиотеке jQuery имеются 2 разные сущности с названием each.

Первая (jQuery.each) - это универсальная функция jQuery с помощью которой можно осуществить перебор элементов массива или объекта.

Вторая (each) - это метод, который применяется к набору элементов для организации цикла по ним.

Цикл each (jQuery.each). Примеры использования

Синтаксис функции each:

// array или object - массив или объект, элементы или свойства которого необходимо перебрать
// callback - функция, которая будет выполнена для каждого элемента массива или свойства объекта
$.each(array или object,callback);

Работу с функцией each разберём на примерах.

Пример №1. В нём выполним переберор всех элементов массива (array).

jQuery - each array (перебор массива)
// массив, состоящий из 3 строк
var arr = ['Автомобиль','Грузовик','Автобус'];

// переберём массив arr
$.each(arr,function(index,value){

  // действия, которые будут выполняться для каждого элемента массива
  // index - это текущий индекс элемента массива (число)
  // value - это значение текущего элемента массива
  
  //выведем индекс и значение массива в консоль
  console.log('Индекс: ' + index + '; Значение: ' + value);

});

/*
Результат (в консоли):
Индекс: 0; Значение: Автомобиль
Индекс: 1; Значение: Грузовик
Индекс: 2; Значение: Автобус
*/

В вышеприведённом коде функция each используется для перебора массива. Функция имеет 2 обязательных параметра. Первый параметр - это сущность (массив или объект), элементы (свойства) которой необходимо перебрать. В данном случае - это массив arr. Второй параметр - это функция обратного вызова, которая будет выполнена для каждого элемента (в данном случае) массива. Она имеет 2 параметра, которые доступны внутри неё посредством соответствующих переменных. Первый параметр - это порядковый номер элемента (отсчёт выполняется с 0). Второй параметр - это значение текущего элемента массива.

Пример №2. В этом примере осуществим перебор всех свойств объекта.

jQuery - each object (перебор объекта)
// объект smartphone, имеющий 5 свойств
var smartphone = {
  "name": "LG G5 se",
  "year": "2016",
  "screen-size": "5.3",
  "screen-resolution": "2560 x 1440",
  "os" : "Android 6.0 (Marshmallow)"
};

// переберём объект smartphone
$.each(smartphone, function( key, value ) {

  // действия, которые будут выполняться для каждого свойства объекта
  // key - текущее имя свойства массива
  // value - значение текущего свойства объекта
 
  // выведем имя свойства и его значение в консоль
  console.log( 'Свойство: ' +key + '; Значение: ' + value );

});

/*
Результат (в консоли):
Свойство: name; Значение: LG G5 se
Свойство: year; Значение: 2016
Свойство: screen-size; Значение: 5.3
Свойство: screen-resolution; Значение: 2560 x 1440
Свойство: os; Значение: Android 6.0 (Marshmallow)
*/

Функция each может использоваться для перебора JavaScript объектов. Отличие её использования заключается только в том, что параметры функции обратного вызова имеют другие значения. Первый параметр хранит название свойства объекта, а второй - значение этого свойства.

Пример №3. В нём осуществим перебор более сложной структуры (рассмотрим, как использовать вложенные each).

// объект, состоящий из 2 свойств. Каждое свойство этого объект имеет в качестве значения массив, элементами которого являются тоже объекты
var articles = {
  "Bootstrap": [
    {"id":"1", "title":"Введение"},
    {"id":"2", "title":"Как установить"},
    {"id":"3", "title":"Сетка"}
  ],
  "JavaScript": [
    {"id":"4", "title":"Основы"},
    {"id":"5", "title":"Выборка элементов"}
  ]  
};

$.each(articles,function(key,data) {
  console.log('Раздел: ' + key);
  $.each(data, function(index,value) {
    console.log('Статья: id = ' + value['id'] + '; Название = '+ value['title']);
  });
});

/*
Результат:
Раздел: Bootstrap
Статья: id = 1; Название = Введение
Статья: id = 2; Название = Как установить
Статья: id = 3; Название = Сетка
Раздел: JavaScript
Статья: id = 4; Название = Основы
Статья: id = 5; Название = Выборка элементов
*/

Как прервать each (выйти из цикла)

Прерывание (break) цикла each осуществляется с помощью оператора return, который должен возвращать значение false.

Например, прервём выполнение цикла each после того как найдём в массиве arr число 7:

// массив, состоящий из 5 чисел
var arr = [5, 4, 7, 17, 19];

// число, которое необходимо найти
var find = 7;

// переберём массив arr
$.each(arr, function (index, value) {
  // если необходимое число найдено, то..
  if (value === find) {
    // вывести его в консоль
    console.log('Ура! Число ' + find + ' найдено! Данное число имеет индекс: ' + index);
    // прервать выполнение цикла
    return false;
  } else {
  // иначе вывести в консоль текущее число
  console.log('Текущее число: ' + value);
  }
});

/* Результат (в консоли):
Текущее число: 5
Текущее число: 4
Ура! Число 7 найдено! Данное число имеет индекс: 2
*/

Как перейти к следующей итерации (each continue)

В each прерывание выполнения текущей итерации и переход к следующей осуществляется с помощью оператора return, который должен иметь значение отличное от false.

// массив, состоящий из чисел
var arr = [3, 5, 4, 9, 17, 19, 30, 35, 40];

// массив, который должен содержать все элементы массива arr, кроме чётных чисел
var newarr = [];

// переберём массив arr
$.each(arr, function (index, value) {

  // если элемент чётный, то пропустим его
  if (value % 2 === 0) {
    // прервём выполнение текущей итерации и перейдём к следующей
    return;
  }
  // добавить в массив newarr значение value
  newarr.push(value);

});

console.log('Исходный массив (arr): ' + arr.join());
console.log('Результирующий массив (newarr): ' + newarr.join());

/* Результат (в консоли):
Исходный массив (arr): 3,5,4,9,17,19,30,35,40
Результирующий массив (newarr): 3,5,9,17,19,35
*/

Перебор текущих элементов (.each)

Синтаксис метода each (пременяется только к выбранным элементам):

jQuery - метод each
.each(function);
// function - функция, которая будет выполнена для каждого элемента текущего объекта

Разберём, как работает метод .each на следующем примере (переберём элементы div):

<div id="id1"></div>
<div id="id2">
  <p></p>
  <hr>
  <p></p>
  <div id="id3"></div>
</div>

<script>
// после загрузки DOM страницы выполнить
$(function(){

  // перебрать элементы div на странице
  $('div').each(function (index, element) {
    // index (число) - текущий индекс итерации (цикла)
      // данное значение является числом
      // начинается отсчёт с 0 и заканчивается количеству элементов в текущем наборе минус 1
    // element - содержит DOM-ссылку на текущий элемент

    console.log('Индекс элемента div: ' + index + '; id элемента = ' + $(element).attr('id')); 
  });

});

// Результат:
  // Индекс элемента div: 0; id элемента = id1
  // Индекс элемента div: 1; id элемента = id2
  // Индекс элемента div: 2; id элемента = id3

</script>

В вышеприведённом примере метод each использует текущий набор (элементы, выбранные посредством селектора $('div')). В качестве обработчика метода each всегда выступает функция, которая будет выполнена для каждого элемента текущего набора (в данном случае для каждого элемента div). Данная функция имеет 2 необязательных параметра. Один из них (index) представляет собой порядковый номер текущей итерации, а второй (element) - DOM ссылку на текущий элемент. Кроме этого внутри функции доступно ключевое слово this, которое также как и второй параметр, содержит DOM-ссылку на текущий элемент.

Например, выведем в консоль значение атрибута href для всех элементов а на странице:

$('a').each(function() {
  console.log($(this).attr('href'));
});

Например, выведем в консоль все внешние ссылки, расположенные на странице:

$('a').each(function() {
  var link = $(this).attr('href');
  if ((link.indexOf('http://') == 0) || (link.indexOf('https://') == 0)) {
    console.log('href ссылки = ' + link);
  }
});

// Если на странице расположены следующие ссылки:
  // <a href="https://www.yandex.ru/">Яндекс</a>
  // <a href="post/2898">Как работает JavaScript?</a>
  // <a href="http://getbootstrap.com/">Bootstrap</a>
// То в консоли увидим следующий результат:
  // https://www.yandex.ru/
  // http://getbootstrap.com/

Например, рассмотрим, как организовать цикл each по элементам DOM, имеющих класс name (переберём все элементы одного класса).

<!-- HTML-код -->
<div class="name">Raspberry pi</div>
<div>single-board compute</div>
<div class="name">Intel Galileo Gen2</div>
<div class="price">19$</div>
<div class="name">Pine A64 Plus</div>

<script>
// с помощью функции jQuery.each ($.each)
$.each($('.name'),function(index,data) {
  console.log('Порядковый номер: ' + index + ' ; Содержимое: ' +$(data).text());
});

// с помощью метода jQuery .each 
$('.name').each(function(index,data) {
  console.log('Порядковый номер: ' + index + ' ; Содержимое: ' +$(data).text());
});

// Получим следующий ответ:
//   Порядковый номер: 0 ; Содержимое: Raspberry pi
//   Порядковый номер: 1 ; Содержимое: Intel Galileo Gen2
//   Порядковый номер: 2 ; Содержимое: Pine A64 Plus
</script>

Например, разберём, как перебрать все элементы на странице.

<script>
$('*').each(function() {
  console.log(this);
});
</script>

Например, выведем значение всех элементов input на странице.

$('input').each(function() {
  console.log($(this).val());
});

Например, переберём все дочерние элементы, расположенные в ul с id="myList" (each children).

<!-- HTML список -->
<ul id="myList">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<script>
$('ul#myList').children().each(function(){
  console.log($(this).text());
});

// Результат:
//   HTML
//   CSS
//   JavaScript
</script>

Рассмотрим способ, с помощью которого можно определить последний индекс (элемент) в методе jQuery each.

// выбираем элементы 
var myList =  $('ul li');
// определяем количество элементом в выборке
var total = myList.length;
// осуществляем перебор выбранных элементов
myList.each(function(index) {
  if (index === total - 1) {
    // это последний элемент в выборке
  }
});

Комментарии: 54

  1. Dem0n1c
    Dem0n1c
    2022-03-21 22:54:05
    Здраствуйте, прошу помощи доработать код, условие: если количество заполненных полей = количеству полей внутри див или количество пустых полей = количеству полей внутри див — то ничего не делаем, в других случаях добавляем класс к пустым полям. Такое условия необходимо соблюдать отдельно для каждого див на странице.
    jsfiddle.net/2mLtgah9/1/"
  1. Антон
    Антон
    2022-01-28 18:02:51
    Александр здраствуйте!
    Подскажите пожалуйста, можно ли перебрать все свойства объекта (Пример — 2), с задержкой?
    Спасибо!
    1. nikoliasa333
      nikoliasa333
      2022-01-09 00:00:41
      Здравствуйте. Большое спасибо за вашу работу и помощь многим людям. И я к вам с вопросом о помощи, суть вот в чем.
      Есть вот такой код:
      $('form table tr').each(function(index) {
        var row = [];
        row.push(index)
        $(this).find("input:not([type='button'])").each(function() {
          row.push($(this).val());
        });
        rows.push(row);
      });
      Который выводит данные из таблицы с нумерацией tr, но первая строка имеет цифру 0, можно ли исправить вернее у брать 0 чтобы первой строке присваивалась цифра 1?
      Заранее спасибо.
      1. Александр Мальцев
        Александр Мальцев
        2022-01-11 14:07:20
        Привет! Спасибо!
        Наверно нужно просто добавить 1:
        $('form table tr').each(function(index) {
          var row = [];
          row.push(index + 1);
          $(this).find("input:not([type='button'])").each(function() {
            row.push($(this).val());
          });
          rows.push(row);
        });
      2. nikoliasa333
        nikoliasa333
        2022-01-11 21:06:10
        Большое вам спасибо. Очень сильно помогли.
    2. Astin
      Astin
      2021-12-25 22:40:48
      Сайт просто суперский. когда что то забываю по коду или не знаю чаще иду сюда к вам и не только по JS.
      От всей души благодарю за развернутое/понятное с примерами описание
      1. Александр Мальцев
        Александр Мальцев
        2021-12-26 04:02:29
        Спасибо за отзыв! После таких слов хочется делать ещё больше качественного контента насколько это возможно в моих силах.
    3. Эрик
      Эрик
      2020-04-13 16:25:37
      Здравствуйте. Не подскажите в чём ошибка. Есть select multiple, и при выборе option с value «null» необходимо чтобы все остальные стали disabled.
      <div class="form-group col-md-6">
      	<label for="field-1" class="control-label">Клиент</label>
              <?php if (is_array($clients)): ?>
              	<select id="client" class="form-control select2" name="client[]" style="width: 100%;" multiple onchange="ChangeFilters()">
                      	<option value="null" <?= isset($saved_client) && in_array('null', $saved_client) ? 'selected':'' ?> <?= (!isset($saved_client)) && in_array('null', $s_cl) ? 'selected':'' ?>>Без клиента</option>
                              <?php foreach ($clients as $client): ?>
                                      <option value="<?=$client['ID']?>" <?= isset($saved_client) && in_array($client['ID'], $saved_client) ? 'selected':'' ?> <?= (!isset($saved_client)) && in_array($client['ID'], $s_cl) ? 'selected':'' ?>>
                                              <?php echo $client['NAME']; ?>
      				</option>
      			<?php endforeach; ?>
              	</select>
      	<?php endif; ?>
      </div>
      
      JS:
      function ChangeFilters() {
      	$('select#client').each(function () {
      		var val = $(this).val();
      		
      		if (val != 'null') {
      			$('select option[value="' + val + '"]').attr("disabled", true);
      		}
      	});
      }
      
      1. Александр Мальцев
        Александр Мальцев
        2020-04-15 13:32:22
        Здравствуйте. Выбор option будет так:
        $('select#client option')
        Обращение к элементу при переборе коллекции осуществляется через this:
        $(this).prop('disabled', true);
    4. Nikita
      Nikita
      2019-09-10 03:05:49
      Добрый день, Шэф. У меня такой вопрос — есть скрипт на прокрутку слайдов на главной страницы (она состоит только из них) через колесико мышки. На мобильной версии внизу под слайдом появляются стрелочки для пролистывания, а между ними текст (наименование слайда). Но при пролистывании стрелочками текст не меняется, остается тот, который вписан в первый слайд (у него присвоен класс active). Прошу вашей помощи!

      Вот код скрипта:

      ///Функции двух стрелок на мобильной версии

      $('.carousel-control-prev').click(function ()
      {
      $('#front-slider').carousel('prev')
      return false;
      });

      $('.carousel-control-next').click(function ()
      {
      $('#front-slider').carousel('next');
      return false;
      });

      ///Скрипт прокрутки, насколько я понял

      var onMouseWheel = function(e) {
      e = e.originalEvent;

      var delta = e.wheelDelta>0||e.detail<0?1:-1;
      var num_links = $('#slide-nav > li').length;

      if ( delta > 0 )
      {
      var set_slide = 0;

      $('#slide-nav a').each(function( index ) {

      if ( $(this).hasClass('active') )
      {
      var current_slide = Math.ceil( $(this).attr('data-slide-to'));
      set_slide = current_slide;
      current_slide--;

      if ( current_slide >= 0 )
      {
      $(this).removeClass('active');
      //$('#front-slider').carousel('prev');
      $('#front-slider').carousel(current_slide);

      set_slide = current_slide;
      }
      }
      });

      $('#slide-nav a').each(function( index ) {

      if ( index == set_slide )
      {
      $(this).addClass('active');
      }
      });
      }
      else
      {
      var set_slide = 0;

      $('#slide-nav a').each(function( index ) {

      if ( $(this).hasClass('active') )
      {
      var current_slide = Math.ceil( $(this).attr('data-slide-to'));
      set_slide = current_slide;
      current_slide++;

      if ( current_slide < num_links )
      {
      $(this).removeClass('active');
      //$('#front-slider').carousel('next');
      $('#front-slider').carousel(current_slide);

      set_slide = current_slide;
      }
      }
      });

      $('#slide-nav a').each(function( index ) {

      if ( index == set_slide )
      {
      $(this).addClass('active');
      }
      });
      }
      }

      ///Бинд колесика

      $('#front-slider').bind(«mousewheel DOMMouseScroll», onMouseWheel);

      /// Еще какая-то функция

      $('.menu-front a').click(function ()
      {
      var target_slide = $(this).attr('data-slide-to');

      switch (target_slide)
      {
      case '1':
      $('#front-slider').carousel(1);
      break;

      case '2':
      $('#front-slider').carousel(2);
      break;

      case '3':
      $('#front-slider').carousel(3);
      break;

      case '4':
      $('#front-slider').carousel(4);
      break;

      case '5':
      $('#front-slider').carousel(5);
      break;

      case '6':
      $('#front-slider').carousel(6);
      break;

      case '7':
      $('#front-slider').carousel(7);
      break;

      default:
      $('#front-slider').carousel(0);
      break;
      }

      $('.menu-front a').removeClass('active');
      $(this).addClass('active');

      return false;
      });
      1. Александр Мальцев
        Александр Мальцев
        2019-09-10 04:55:04
        Добрый день! Код конечно это хорошо, но желательно её пример в какой-нибудь песочнице.
    5. Vasily
      Vasily
      2019-03-25 13:58:45
      Здравствуйте Шеф, проблемы с кодом на php, цель объединить php и js в один js(jQuery). Песочница: JS

      Помогите в решение пожалуйста ^-^
      1. Архаил
        Архаил
        2017-11-23 15:25:59
        Добрый день! Подскажите пожалуйста, как мне в js проверить полученный двухмерный ассоциативный массив, найти ключ с пришедшим значением(пришедшее значение: 902), то есть значение: 902 найдется у ключа [ID_PRODUCT].
        И вернуть весь массив в котором он находится, то есть должен на примере получить все ключи и значения массива: [1] => Array (….
        Array
        (
            [0] => Array
                (
                    [ID] => 1
                    [ID_PRODUCT] => 901
                    [NAME] => S44 White
                    [PRICE_RUS] =>  5555р
                    [ARCHIVE] => 3
                    [GROUP_NAME] => Смартфон
        	)
        [1] => Array
                (
                    [ID] => 2
                    [ID_PRODUCT] => 902
                    [NAME] => S4444 Grey
                    [PRICE_RUS] =>  5555р
                    [ARCHIVE] => 3
                    [GROUP_NAME] => Смартфон
        	)
        [2] => Array
                (
                    [ID] => 3
                    [ID_PRODUCT] => 903
                    [NAME] => S44 Black
                    [PRICE_RUS] =>  5555р
                    [ARCHIVE] => 3
                    [GROUP_NAME] => Смартфон
        	)	
        
        а после вернуть полученный подмассив в html
        1. Александр Мальцев
          Александр Мальцев
          2017-11-23 16:16:19
          Здравствуйте!
          Ну, это, скорее всего у вас не js, а php-массив.
          Его сначала необходимо передать js, а уже только после этого его перебрать и найти нужное.
          Например, так:
          <?php
          $php_array = array(
            array(
              'ID' => 1,
              'ID_PRODUCT' => 901,
              'NAME' => 'S44 White',
              'PRICE_RUS' =>  '5555р',
              'ARCHIVE' => 3,
              'GROUP_NAME' => 'Смартфон'
            ),
            //...
          );
          ?>
          <script>
              var js_array =<?php echo json_encode($php_array);?>;
              var new_array;
              $.each(js_array,function(key,data){   
                  if (data['ID_PRODUCT']===902) {
                      // получим подмассив
                      new_array = js_array[key];
                      // выведем, например подмассив в консоль
                      console.log(new_array);
          	}
              });
          </script>
          
        2. Архаил
          Архаил
          2017-11-23 17:29:40
          если прописываю строчку:
          var js_array =<?php echo json_encode($rsProduct);?>;
          , то он ругается и данные не приходят.
          Прописал на стороне сервера:
          $jsonZ = json_encode($rsProduct);
          , а в js
          var obj = {$jsonZ};
          , так данные приходят.

          А так написал такой скрипт:
          <script>
              $(".individOnClick").click(function (event){
                  event.preventDefault();
                  var  idClick;
                  idClick = $(this).attr('id');
                  var obj = {$jsonZ};
          
                  function find(obj, value) {
                      for (var i in obj) for (var j in obj[i])
                       if (obj[i][j] == value) return [obj[i], obj[i][j]];
                      return false;
                  };
                  console.log(find(obj, idClick));
              });
          </script>
          
          все перебирает и возвращает нужный подмассив, вот теперь надо бы как то вернуть данные на сайт… как лучше не знаю… Либо с js вернуть в php, либо с js массив данных на страницу, НО я как понимаю что скрипт отрабатывает на стороне клиента и данные необходимо вернуть на сервер, а после их уже вернуть на страницу сайта. Подскажите как правильно вернуть с js скрипта данные, не перезагружая страницы и не используя GET запрос, чтобы данные не проходили через URL.
        3. Архаил
          Архаил
          2017-11-24 14:14:16
          Подскажите пожалуйста, что-то не получается передать данные с js в php.
          В переменную присваиваюполученный объект:
          var mass = (find(obj, idClick));
          Далее перевожу в строку перед передачей:
          var massString = JSON.stringify( mass );
          после уже передаю на сервер:
          $.ajax({
                      type: "POST",
                      async: true,
                      url: "?category=300&controller=product&id=444",//файл который обрабатывает скрипт
                      data: massString, 
                      success:function (data) {
                          console.log(data);}
                  });
          но в success:function (data) в console.log(data); приходят нужные строковые данные, но вот на сервер они не приходят, не доходят, в php проверяю переменную POST, но она пустуя… Подскажите в чем может быть ошибка, возможно что-то упустил.
        4. Александр Мальцев
          Александр Мальцев
          2017-11-24 14:20:16
          С помощью AJAX запроса:
          
          $.post({
              url: 'getdata.php',
              data: {'data': find(obj, idClick)},
              success: function (data) {
                  console.log('Данные успешно отправлены.');
              }
          });
          
          Посмотреть примеры по AJAX можете на этой странице.
        5. Александр Мальцев
          Александр Мальцев
          2017-11-24 14:29:43
          В параметре data функции $.ajax данные необходимо указывать так (с ключом):
          data: {'data': massString},
          
          А на сервере их можно будет получить так (по ключу data):
          $_POST['data']
          
        6. Архаил
          Архаил
          2017-11-24 14:32:58
          Выдает Фатальную Ошибку:
          "data: {'data': find(obj, idClick)}," - Unexpected ": ", expected one of: "}"
          ругается на строку data:
        7. Александр Мальцев
          Александр Мальцев
          2017-11-24 14:40:12
          JSON.stringify ещё необходимо добавить:
          data: {'data': JSON.stringify(find(obj, idClick))},
          
        8. Архаил
          Архаил
          2017-11-24 14:41:55
          попробовал, та же ошибка ...on line 93 «data: {'data': massString},» — Unexpected ": ", expected one of: "}" < — thrown in…
          Вот весь скрипт:
          <script>
              $(".individOnClick").click(function (event){
                  event.preventDefault();
                  var  idClick;
                  idClick = $(this).attr('id');
                  var obj = {$jsonZ};
          
                  function find(obj, value) {
                      for (var i in obj) for (var j in obj[i])
                       if (obj[i][j] == value) return [obj[i], obj[i][j]];
                      return false;
                  };
          
                  var mass = (find(obj, idClick));
                  var massString = JSON.stringify(mass);
                  $.post({
                      url: '?category=300&controller=product&id=1253&lang=ru#_tabs-10',
                      data: {'data': massString},
                      success: function (data) {
                          console.log('Данные успешно отправлены.');
                      }
                  });
              });
          </script>
          Вроде все правильно, но ошибка лезет.
        9. Архаил
          Архаил
          2017-11-24 14:52:38
          83 "data: {'data': JSON.stringify(find(obj, idClick))}," - Unexpected ": ", expected one of: "}" 
          изменил как говорили, не помогло, я вот не могу понять из-за чего ошибка…
          <script>
          
          $(".individOnClick").click(function (event){
                  event.preventDefault();
                  var  idClick;
                  idClick = $(this).attr('id');
                  var obj = {$jsonZ};
          
                  function find(obj, value) {
                      for (var i in obj) for (var j in obj[i])
                       if (obj[i][j] == value) return [obj[i], obj[i][j]];
                      return false;
                  };
          
                  $.post({
                      url: '?category=300&controller=product&id=444',
                      data: {'data': JSON.stringify(find(obj, idClick))},
                      success: function (data) {
                          console.log('Данные успешно отправлены.');
                      }
                  });
              });
          </script>
        10. Александр Мальцев
          Александр Мальцев
          2017-11-24 15:08:38
          Вам необходимо проверить, что возвращает функция find.
          console.log(find(obj, idClick));
          
        11. Архаил
          Архаил
          2017-11-24 15:16:07
          при клике по разным кнопкам, приходит нужный объект, один из ключей в значении которого собранный массив.
          Целый массив с массивами:
          [0] => Array
                  (
                      [ID] => 1
                      [ID_PRODUCT] => 901
                      [NAME] => S44 White
                      [PRICE_RUS] =>  5555р
                      [ARCHIVE] => 3
                      [GROUP_NAME] => Смартфон
          	)
          [1] => Array
                  (
                      [ID] => 2
                      [ID_PRODUCT] => 902
                      [NAME] => S4444 Grey
                      [PRICE_RUS] =>  5555р
                      [ARCHIVE] => 3
                      [GROUP_NAME] => Смартфон
          	)
          [2] => Array
                  (
                      [ID] => 3
                      [ID_PRODUCT] => 903
                      [NAME] => S44 Black
                      [PRICE_RUS] =>  5555р
                      [ARCHIVE] => 3
                      [GROUP_NAME] => Смартфон
          	)	
          
          а приходит к примеру любой из них, пример:
          [1] => Array
                  (
                      [ID] => 2
                      [ID_PRODUCT] => 902
                      [NAME] => S4444 Grey
                      [PRICE_RUS] =>  5555р
                      [ARCHIVE] => 3
                      [GROUP_NAME] => Смартфон
          	)
          
          Если полностью, то вот такой массив в сонсоли:
          (2) [{…}, "900"]
          0: COLOR: "#000"GROUP_NAME: "Смартфон"ID: "900"ID_PRODUCT: "901"NAME: "S44"PRICE_RUS: "5555р"]
          __proto__: Object1: "900"
          length: 2
          __proto__: Array(0)concat: ƒ concat()constructor: ƒ Array()copyWithin: ƒ copyWithin()entries: ƒ entries()every: ƒ every()fill: ƒ fill()filter: ƒ filter()find: ƒ find()findIndex: ƒ findIndex()forEach: ƒ forEach()includes: ƒ includes()indexOf: ƒ indexOf()join: ƒ join()keys: ƒ keys()lastIndexOf: ƒ lastIndexOf()length: 0map: ƒ map()pop: ƒ pop()push: ƒ push()reduce: ƒ reduce()reduceRight: ƒ reduceRight()reverse: ƒ reverse()shift: ƒ shift()slice: ƒ slice()some: ƒ some()sort: ƒ sort()splice: ƒ splice()toLocaleString: ƒ toLocaleString()toString: ƒ toString()unshift: ƒ unshift()Symbol(Symbol.iterator): ƒ values()Symbol(Symbol.unscopables): {copyWithin: true, entries: true, fill: true, find: true, findIndex: true, …}__proto__: Object
          
        12. Архаил
          Архаил
          2017-11-30 10:36:26
          Добрый день, в общем решил проблему, но столкнулся с другой:
          подскажите как правильно удалить эллемент со страницы, без удаления событий(если я правильно выразился). При подгружении контента Ajax (js), перестают работать скрипты используемые ранее на контенте, То есть когда удаляю эллемент через remove(), а на его место ставлю другой подгруженный Ajax контент, оборачиваю в такой же html, где используются такие же скрипты как и на удаленном, то они не работают. подскажите что делаю не так. А так же когда переключаю цвета, пришедший контент с Ajax почему то дергается несколько раз дергается 3 раза (в массиве 3-ключа с массивами), потом при переключении перестает дергатся и сменяется нормально, мне кажется что неправильно работаю с рекурсией, подскажите пожалуйста.

          Ниже написано две функции они почти идентичны, за исключением того что первая это
          $(".individOnClick").on('click').click(function (event) {....
          
          Она вызывает в себе нижнюю функцию с рекурсией ...
          $(".individOnClick").off('click').click(function (event){....
          … с рекурсией в success. Код скрипта:
          <script type="text/javascript">
          $(".individOnClick").on('click').click(function (event){
                  event.preventDefault();
                  var  idClick;
                  idClick = $(this).attr('id');
                  var obj = {json_encode($jsonZ)};
                  var url = {$url};
                  var idd = {$itemId};
                  function find(obj, value) {
                      for (var i in obj) for (var j in obj[i])
                       if (obj[i][j] == value) return [obj[i], obj[i][j]];
                      return false;
                  }
                  var mass = find(obj, idClick);
                  var massString = JSON.stringify(mass[0]);
          // console.log(response);
                  
                   $.ajax({
                      {literal} //<<== Это тег шаблонизатора чтобы он не ругался на фигурные скобки в скрипте"}"
                      async: true,
                      type: "POST",
                      url: "ProductController.php?category="+url+"&controller=product&id="+idd+"&lang=ru#_tabs-10",
                      data:  {mass : massString},
                      dataType: 'text',
                      success: function(data) {
                          console.log('Данные успешно отправлены.');
                          var description = document.getElementById("indivRemoveJs");
                          description.remove();
                          $('.individAppendJs').html(data);
                            {/literal} //<<== Это тег шаблонизатора чтобы он не ругался на фигурные скобки в скрипте"}"
                          name_of_my_function(); // вызов функции которая ниже
                      
                          // console.log(obj);    
                      }
                  });
                
              });
          
          function name_of_my_function(){ // функция с рекурсией
                  $(".individOnClick").off('click').click(function (event){
                  event.preventDefault();
                  var  idClick;
                  idClick = $(this).attr('id');
                  var obj = {json_encode($jsonZ)};
                  var url = {$url};
                  var idd = {$itemId};
                  function find(obj, value) {
                      for (var i in obj) for (var j in obj[i])
                       if (obj[i][j] == value) return [obj[i], obj[i][j]];
                      return false;
                  }
                  var mass = find(obj, idClick);
                  var massString = JSON.stringify(mass[0]);
          // console.log(response);
                  $.ajax({
                      {literal} //<<== Это тег шаблонизатора чтобы он не ругался на фигурные скобки в скрипте"}"
                      async: true,
                      type: "POST",
                      url: "ProductController.php?category="+url+"&controller=product&id="+idd+"&lang=ru#_tabs-10",
                      data:  {mass : massString},
                      dataType: 'text',
                      success: function(data) {
                          console.log('Данные успешно отправлены.');
                          // console.log(mass[0]);
                          var description = document.getElementById("indivRemoveJs");
                          description.remove();
                          $('.individAppendJs').html(data);
                          name_of_my_function();  
                      {/literal} //<<== Это тег шаблонизатора чтобы он не ругался на фигурные скобки в скрипте"}"
                      }
                  });
                  });
              }
          </script>
          
        13. Александр Мальцев
          Александр Мальцев
          2017-12-01 12:19:43
          В этом случае обработку события необходимо осуществлять на элементе, который всегда есть. Это возможно благодаря тому, что события всплывают.
          Например:
          
          $(document).on('click','.individOnClick', function() {
            ...
          }); 
          
          Более подробно эту информацию вы можете почитать в статье jQuery – Обработка событий, раздел «Добавление событий к динамически созданным объектам».
      2. Magomed
        Magomed
        2017-11-10 01:55:42
        Всем привет.
        Ребята я не силен в парсинге
        Помощь нужна в ajax jquery спарсить
        нужно с api.nicehash.com/api?method=simplemultialgo.info
        с массива {«paying»:»0.00672334″,»port»:3353,»name»:»daggerhashimoto»,»algo»:20}
        вытащить переменную «paying»:»0.00672334

        я пробовал по аналогии примеров. но тут нет примера, если несколько массивов то парсить один из всех имеющихся.

        раньше парсил более простую модель

        $.getJSON("https://api.nicehash.com/api?method=simplemultialgo.info").done(function(data) {
                test1 = data.result.simplemultialgo[20.paying];
                document.getElementById('USD').innerHTML = test1.toFixed(8);
               });
        и для вывода использую
        <strong id="USD"></strong>
        но с массивами выше справиться не получается.
        1. Александр Мальцев
          Александр Мальцев
          2017-11-10 18:29:42
          Привет!
          test1 = data.result.simplemultialgo[20].paying;
          document.getElementById('USD').innerHTML = parseFloat(test1).toFixed(8);
          
        2. Magomed
          Magomed
          2017-11-10 18:48:34
          Спасибо Алексей что откликнулись
          я исправил ошибку
          вот полный код

          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
             <script type="text/javascript">
          $.getJSON("https://api.nicehash.com/api?method=simplemultialgo.info").done(function(data) {
                  test1 = data.result.simplemultialgo[20].paying;
                  document.getElementById('USD').innerHTML = test1.toFixed(8);
                 });
          </script>
          
          <p class="text-muted">© 05 |
                    <strong>DBIX</strong> : <strong id="USD"></strong>
          </p>
          результат не получаю.
        3. Magomed
          Magomed
          2017-11-11 15:14:29
          Александр, Не поможете?
          я переделал запрос. но все равно информацию не выводит.

          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
             <script type="text/javascript">
          $.getJSON("https://api.nicehash.com/api?method=simplemultialgo.info").done(function(data) {
                  test1 = data.result.simplemultialgo[20].paying;
                  document.getElementById('USD').innerHTML = parseFloat(test1).toFixed(8);
                 });
          </script>
          
          <p class="text-muted">© 05 |
                    <strong>DBIX</strong> : <strong id="USD"></strong>
          </p>
          в консоли выдает такую ошибку
          XMLHttpRequest cannot load api.nicehash.com/api?method=simplemultialgo.info. No 'Access-Control-Allow-Origin' header is present on the requested resource.
        4. Александр Мальцев
          Александр Мальцев
          2017-11-11 16:08:23
          Запросы XMLHttpRequest на домен отличный от текущего проходят специальный контроль безопасности. Сервер (в данном случае api.nicehash.com) должен, со своей стороны, ответить, разрешает ли он такой запрос к себе. Вам он ответил, что нет. Поэтому вы и не можете получить информацию.
        5. Magomed
          Magomed
          2017-11-12 00:43:39
          Понял, я этого не знал.
          Спасибо за разъяснение.

          Александр, по другому можно этот параметр вывести?
          Под зарез нужно вывести
        6. Александр Мальцев
          Александр Мальцев
          2017-11-12 16:39:05
          Не знаю, что это за сервис, может вам нужно в запросе передавать какие-то дополнительные параметры:
          var apiId = '******';
          var apiKey = '******';
          $.getJSON('https://api.nicehash.com/api?method=simplemultialgo.info&id='+apiId+'&key='+apiKey).done(function(data) {
          ...
          }
          
        7. Александр Мальцев
          Александр Мальцев
          2017-11-12 16:40:32
          На php + JavaScript это можно сделать так:
          <div id="data">
          <?php
          echo file_get_contents('https://api.nicehash.com/api?method=simplemultialgo.info');
          ?>
          </div>
          <p id="USD"></p>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
          <script>
          $(function(){
              var data = $('#data').text();
              var data = JSON.parse(data);
              var test1 = data.result.simplemultialgo[20].paying;
              document.getElementById('USD').innerHTML = parseFloat(test1).toFixed(8);
          });
          </script>
          
        8. Magomed
          Magomed
          2017-12-04 15:00:22
          Александр, Вы были правы… Саппорт ответил
          Вам необходимо передать ключ API и ID, которые вы можете найти в разделе API-интерфейc в настройках

          Подскажите пожалуйста как этот ключь передается?
        9. Magomed
          Magomed
          2017-12-04 19:50:24
          var apiId = '29456';
          var apiKey = '99d2d96f-704b-4dd9-b186-3c60df1dece0';
          $.getJSON('https://api.nicehash.com/api?method=stats.global.current&id='+apiId+'&key='+apiKey).done(function(data) {
              var html = '';
              
              data.result.simplemultialgo.forEach(function(element) { 
                  html += '<img src="ссылка' + element.paying + '">';
              })
          
              console.log(value['html']);
          });
          
          id и ключ выше указал. все равно та же ошибка. Ладно. начал в их саппорт писать
        10. Александр Мальцев
          Александр Мальцев
          2017-12-05 12:33:16
          Это необходимо уточнять у них.
      3. Сергей
        Сергей
        2017-03-10 10:10:51
        Александр, добрый день.
        Посоветуйте, что предпринять.
        В ответ на аякс-запрос из базы данных возвращается массив объектов:
        0:{id: "1", title: "title 1", text: "text 1"}
        id:"1"
        text:"text 1"
        title:"title 1"
        1:{id: "2", title: "title 2", text: "text 2"}
        id:"2"
        text:"text 2"
        title:"title 2"	
        **************
        
        В функции success, как я понял из данной статьи, нужно дважды использовать each — применив к двум принятым объектам и к каждой паре «ключ-значение» объекта…
        Пишу вот такой код:
        success: function(response) {
          $.each(response, function(key, value){
            $.each(value, function(title, text){
              console.log(title);
              console.log(text);
            })
          });
        },
        **********,
        
        В консоли появляется следующая ошибка:
        "Uncaught ReferenceError: json_encode is not defined".
        
        Подскажите пожалуйста, что не так?
        скрин: itchief.ru/assets/uploadify/1/8/b/18b202c1b13bb78f48c6651be2ec71cc.jpg
        1. Александр Мальцев
          Александр Мальцев
          2017-03-10 11:57:06
          Тут ошибка не в each, а с форматом JSON. Вы как-то некорректно посылаете данные на сервер. Т.к. функции json_encode в JavaScript нет, это функция языка PHP. В JavaScript другие функции: JSON.stringify (для преобразования объекта в JSON строку) и JSON.parse (для преобразования JSON строки в объект JavaScript).
        2. Сергей
          Сергей
          2017-03-10 12:05:39
          Александр, я из php-файла отправил ответ вот в таком виде:
          echo json_encode($arr);
          exit();


          success, по идее, принимает читабельный для него формат json.
          только теперь я не пойму как мне разобрать эту массив объектов (я ведь правильно назвал то, что вернулось в ответ на запрос?) строку, чтобы потом использовать эти данные… ну, наверное нечто такое:
          $('#content').append('titlet')
          $('#content').append('text')
        3. Сергей
          Сергей
          2017-03-10 12:11:25
          а посылается запрос вот так:

          $.ajax({
          url: «ajax.php»,
          type: «POST»,
          data: {
          offset: offset
          },
          ......
          и т.д.

          переменная offset=2 (т.е. количество необходимых статей для LIMIT-а в sql запросе.
          и эти две статьи выбираются, и через echo json_encode($arr); возвращаются…
          но вот что с ними потом сделать, чтобы этот title и text можно было закидывать в верстку… ума не приложу.
          ну до верстки еще далеко… консоль не показывает этих данных и я понимаю, что уже на этом этапе у меня какой то косяк.
        4. Сергей
          Сергей
          2017-03-10 12:38:08
          еще дополню…
          я убрал запрос id и оставил только выборку title, text.
          ответ приходит вот такой —
          [{«title»:«title 1»,«text»:«text 1»},{«title»:«title 2»,«text»:«text 2»}]
          формат, как мне кажется, вполне корректный.
          или нет?
        5. Александр Мальцев
          Александр Мальцев
          2017-03-10 14:47:42
          Попробуй добавить перед each:
          var response = JSON.parse(response);
          
        6. Александр Мальцев
          Александр Мальцев
          2017-03-10 14:51:49
          Ошибка на 21 строчке в файле script.js, в которой происходит обращение к json_encode. А этой функции в JavaScript нет. Необходимо открыть файл script.js, перейти на 21 строчку и посмотреть что там за код…
        7. Александр Мальцев
          Александр Мальцев
          2017-03-10 14:57:53
          Если id не будете выводить на страницу, то можно его и не отправлять. И объём данных будет меньше.
        8. Александр Мальцев
          Александр Мальцев
          2017-03-10 15:13:31
          Вы уже сделали это выше с помощью each. Только сначала заведите переменную, например output, в которую будете складывать результирующий HTML-код и когда вы его полностью построите, то вставите на страницу.
          var output = '';
          $.each(response, function(key, value){
            $.each(value, function(title, text){
              output += '<h3>'+title+'</h3>';
              output += '<p>'+text+'</p>';
            })
          });
          $('#content').append(output);
          
        9. Сергей
          Сергей
          2017-03-10 17:37:22
          Александр, json_encode у меня в php файле. Он ведь только перегоняет массив в json-формат.
          в script.js этой функции нет.
          по поводу формата — валидатор json ругнулся на него (на формат), я добавил в функцию json_encode константу JSON_FORCE_OBJECT и теперь ответ такой —
          {«0»:{«title»:«title 1»,«text»:«text 1»},«1»:{«title»:«title 2»,«text»:«text 2»}}.

          попробовал обработать эти данные функцией forEach —
          пробую теперь обработать эти данные с помощью each — вываливается вот такая ошибка- получаю ошибку — Uncaught TypeError: response.forEach is not a function.

          если прибегаю к each — TypeError: invalid 'in' operand a
          ////////////////////
          второй день бьюсь об эту стену.
          уже штукатурка сыпется.
        10. Сергей
          Сергей
          2017-03-10 18:09:29
          Александр, вы мой спаситель!!!
          эта строчка помогла.
          *******
          Спасибо вам большое.
          Я уже было отчаялся)
        11. Сергей
          Сергей
          2017-03-11 22:18:40
          А вот этого вчера не заметил…
          Здорово. Я сделал глупый год, а ваш мне помог довести задуманное до ума.

          Единственное, что пришлось сделать, убрать один из each-ей, потому что в output попадали и ключи, которые потом выводились в диве #content (в моем случае — #info).

          вот тот вариант, который выводит так, как нужно:
          success: function (response) {
          var output = '';
          $.each(response, function(key, value){
          output += ''+value.title+'';
          output += ''+value.text+'';
          );
          $('#info').append(output);
          }

          ********************
          Александр, еще раз спасибо вам.
      4. Александр
        Александр
        2016-07-31 05:45:13
        А как прменить это к стилям?
        Например, есть перечень цветов:
        rgba(204, 204, 255, 1)
        rgba(255, 204, 255, 1)
        rgba(204, 153, 255, 1)
        rgba(102, 51, 255, 1)
        rgba(204, 51, 255, 1)
        rgba(255, 255, 255, 1)

        И есть условно говоря, такая разметка:

        <html>
        
        <head>
          <title>Untitled</title>
        <style>
        .textlogo {
        	/*font-family: 'Roboto Condensed', sans-serif;
        	font-weight: 300;
        	font-style: italic;*/
        	display: table-cell;
        	border: 0px none;
        	height: 100%;
        	vertical-align: middle;
        	font-size: 24px;
        	color: white;
        	position: relative;
        	float: left;
        	margin-top:15px;
        }
        .textlogo:hover {
        	color: rgba(255, 153, 0, 1);
        }
        </style>
        </head>
        
        <body style="background:gray;">
            <a href="#"><div class="textlogo">TEXTLOGO</div></a>
        </body>
        
        </html>
        
        Нужно, чтобы при загрузке страницы или обновлении страницы свойство color у .textlogo — устанавливалось из случайно выбранного цвета из перечня.
        1. Александр Мальцев
          Александр Мальцев
          2016-07-31 07:17:20
          each используется для перебора. А в Вашей задаче ничего перебирать не надо, необходимо только выбрать случайный цвет из списка.
          Это можно сделать так:
          <script>
          // массив цветов
          var $colors = [
            'rgba(204, 204, 255, 1)',
            'rgba(255, 204, 255, 1)',
            'rgba(204, 153, 255, 1)',
            'rgba(102, 51, 255, 1)',
            'rgba(204, 51, 255, 1)',
            'rgba(255, 255, 255, 1)'
          ];
          // случайный цвет
          var $randomColor = Math.round( Math.random() * ($colors.length-1) );
          // исходный цвет
          $sourceColor = 'white';
          // после загрузки страницы
          $(function(){
            // при hover
            $('.textlogo').hover(
              function() {
                $(this).css('color',$colors[$randomColor]);
              },
              function() {
                $(this).css('color',$sourceColor);
              }
            );
          });
          </script>
          
        2. Александр
          Александр
          2016-07-31 14:03:31
          Да, только применяет случайный цвет к .hover, а хотелось бы к элементу без .hover
        3. Александр
          Александр
          2016-08-01 04:12:01
          Вопрос снят.
        4. Александр Мальцев
          Александр Мальцев
          2016-08-05 12:13:39
          Тогда будет ещё проще (может быть кому нибудь пригодится).
          // массив цветов
          var $colors = [
            'rgba(204, 204, 255, 1)',
            'rgba(255, 204, 255, 1)',
            'rgba(204, 153, 255, 1)',
            'rgba(102, 51, 255, 1)',
            'rgba(204, 51, 255, 1)',
            'rgba(255, 255, 255, 1)'
          ];
          // случайный цвет
          var $randomColor = Math.round( Math.random() * ($colors.length-1) );
          // после загрузки страницы
          $(function(){
            $('.textlogo').css('color',$colors[$randomColor]);
          });