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

Александр Мальцев
Александр Мальцев
166K
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) {
    // это последний элемент в выборке
  }
});

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

  1. Dem0n1c
    Dem0n1c
    21.03.2022, 22:54
    Здраствуйте, прошу помощи доработать код, условие: если количество заполненных полей = количеству полей внутри див или количество пустых полей = количеству полей внутри див — то ничего не делаем, в других случаях добавляем класс к пустым полям. Такое условия необходимо соблюдать отдельно для каждого див на странице.
    jsfiddle.net/2mLtgah9/1/"
    1. Антон
      Антон
      28.01.2022, 18:02
      Александр здраствуйте!
      Подскажите пожалуйста, можно ли перебрать все свойства объекта (Пример — 2), с задержкой?
      Спасибо!
      1. nikoliasa333
        nikoliasa333
        09.01.2022, 00:00
        Здравствуйте. Большое спасибо за вашу работу и помощь многим людям. И я к вам с вопросом о помощи, суть вот в чем.
        Есть вот такой код:
        $('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. Александр Мальцев
          Александр Мальцев
          11.01.2022, 14:07
          Привет! Спасибо!
          Наверно нужно просто добавить 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);
          });
          1. nikoliasa333
            nikoliasa333
            11.01.2022, 21:06
            Большое вам спасибо. Очень сильно помогли.
        2. Astin
          Astin
          25.12.2021, 22:40
          Сайт просто суперский. когда что то забываю по коду или не знаю чаще иду сюда к вам и не только по JS.
          От всей души благодарю за развернутое/понятное с примерами описание
          1. Александр Мальцев
            Александр Мальцев
            26.12.2021, 04:02
            Спасибо за отзыв! После таких слов хочется делать ещё больше качественного контента насколько это возможно в моих силах.
          2. Эрик
            Эрик
            13.04.2020, 16:25
            Здравствуйте. Не подскажите в чём ошибка. Есть 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. Александр Мальцев
              Александр Мальцев
              15.04.2020, 13:32
              Здравствуйте. Выбор option будет так:
              $('select#client option')
              Обращение к элементу при переборе коллекции осуществляется через this:
              $(this).prop('disabled', true);
            2. Nikita
              Nikita
              10.09.2019, 03:05
              Добрый день, Шэф. У меня такой вопрос — есть скрипт на прокрутку слайдов на главной страницы (она состоит только из них) через колесико мышки. На мобильной версии внизу под слайдом появляются стрелочки для пролистывания, а между ними текст (наименование слайда). Но при пролистывании стрелочками текст не меняется, остается тот, который вписан в первый слайд (у него присвоен класс 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. Александр Мальцев
                Александр Мальцев
                10.09.2019, 04:55
                Добрый день! Код конечно это хорошо, но желательно её пример в какой-нибудь песочнице.
              2. Vasily
                Vasily
                25.03.2019, 13:58
                Здравствуйте Шеф, проблемы с кодом на php, цель объединить php и js в один js(jQuery). Песочница: JS

                Помогите в решение пожалуйста ^-^
                1. Архаил
                  Архаил
                  23.11.2017, 15:25
                  Добрый день! Подскажите пожалуйста, как мне в 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. Александр Мальцев
                    Александр Мальцев
                    23.11.2017, 16:16
                    Здравствуйте!
                    Ну, это, скорее всего у вас не 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>
                    
                    1. Архаил
                      Архаил
                      24.11.2017, 14:14
                      Подскажите пожалуйста, что-то не получается передать данные с 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, но она пустуя… Подскажите в чем может быть ошибка, возможно что-то упустил.
                      1. Александр Мальцев
                        Александр Мальцев
                        24.11.2017, 14:29
                        В параметре data функции $.ajax данные необходимо указывать так (с ключом):
                        data: {'data': massString},
                        
                        А на сервере их можно будет получить так (по ключу data):
                        $_POST['data']
                        
                        1. Архаил
                          Архаил
                          24.11.2017, 14:41
                          попробовал, та же ошибка ...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>
                          Вроде все правильно, но ошибка лезет.
                      2. Архаил
                        Архаил
                        23.11.2017, 17:29
                        если прописываю строчку:
                        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.
                        1. Александр Мальцев
                          Александр Мальцев
                          24.11.2017, 14:20
                          С помощью AJAX запроса:
                          
                          $.post({
                              url: 'getdata.php',
                              data: {'data': find(obj, idClick)},
                              success: function (data) {
                                  console.log('Данные успешно отправлены.');
                              }
                          });
                          
                          Посмотреть примеры по AJAX можете на этой странице.
                          1. Архаил
                            Архаил
                            24.11.2017, 14:32
                            Выдает Фатальную Ошибку:
                            "data: {'data': find(obj, idClick)}," - Unexpected ": ", expected one of: "}"
                            ругается на строку data:
                            1. Александр Мальцев
                              Александр Мальцев
                              24.11.2017, 14:40
                              JSON.stringify ещё необходимо добавить:
                              data: {'data': JSON.stringify(find(obj, idClick))},
                              
                              1. Архаил
                                Архаил
                                24.11.2017, 14:52
                                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>
                                1. Александр Мальцев
                                  Александр Мальцев
                                  24.11.2017, 15:08
                                  Вам необходимо проверить, что возвращает функция find.
                                  console.log(find(obj, idClick));
                                  
                                  1. Архаил
                                    Архаил
                                    30.11.2017, 10:36
                                    Добрый день, в общем решил проблему, но столкнулся с другой:
                                    подскажите как правильно удалить эллемент со страницы, без удаления событий(если я правильно выразился). При подгружении контента 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>
                                    
                                    1. Александр Мальцев
                                      Александр Мальцев
                                      01.12.2017, 12:19
                                      В этом случае обработку события необходимо осуществлять на элементе, который всегда есть. Это возможно благодаря тому, что события всплывают.
                                      Например:
                                      
                                      $(document).on('click','.individOnClick', function() {
                                        ...
                                      }); 
                                      
                                      Более подробно эту информацию вы можете почитать в статье jQuery – Обработка событий, раздел «Добавление событий к динамически созданным объектам».
                                    2. Архаил
                                      Архаил
                                      24.11.2017, 15:16
                                      при клике по разным кнопкам, приходит нужный объект, один из ключей в значении которого собранный массив.
                                      Целый массив с массивами:
                                      [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
                                      
                      3. Magomed
                        Magomed
                        10.11.2017, 01:55
                        Всем привет.
                        Ребята я не силен в парсинге
                        Помощь нужна в 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. Александр Мальцев
                          Александр Мальцев
                          10.11.2017, 18:29
                          Привет!
                          test1 = data.result.simplemultialgo[20].paying;
                          document.getElementById('USD').innerHTML = parseFloat(test1).toFixed(8);
                          
                          1. Magomed
                            Magomed
                            11.11.2017, 15:14
                            Александр, Не поможете?
                            я переделал запрос. но все равно информацию не выводит.

                            <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.
                            1. Александр Мальцев
                              Александр Мальцев
                              11.11.2017, 16:08
                              Запросы XMLHttpRequest на домен отличный от текущего проходят специальный контроль безопасности. Сервер (в данном случае api.nicehash.com) должен, со своей стороны, ответить, разрешает ли он такой запрос к себе. Вам он ответил, что нет. Поэтому вы и не можете получить информацию.
                              1. Magomed
                                Magomed
                                12.11.2017, 00:43
                                Понял, я этого не знал.
                                Спасибо за разъяснение.

                                Александр, по другому можно этот параметр вывести?
                                Под зарез нужно вывести
                                1. Александр Мальцев
                                  Александр Мальцев
                                  12.11.2017, 16:40
                                  На 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>
                                  
                                  1. Александр Мальцев
                                    Александр Мальцев
                                    12.11.2017, 16:39
                                    Не знаю, что это за сервис, может вам нужно в запросе передавать какие-то дополнительные параметры:
                                    var apiId = '******';
                                    var apiKey = '******';
                                    $.getJSON('https://api.nicehash.com/api?method=simplemultialgo.info&id='+apiId+'&key='+apiKey).done(function(data) {
                                    ...
                                    }
                                    
                                    1. Magomed
                                      Magomed
                                      04.12.2017, 19:50
                                      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 и ключ выше указал. все равно та же ошибка. Ладно. начал в их саппорт писать
                                      1. Magomed
                                        Magomed
                                        04.12.2017, 15:00
                                        Александр, Вы были правы… Саппорт ответил
                                        Вам необходимо передать ключ API и ID, которые вы можете найти в разделе API-интерфейc в настройках

                                        Подскажите пожалуйста как этот ключь передается?
                                        1. Александр Мальцев
                                          Александр Мальцев
                                          05.12.2017, 12:33
                                          Это необходимо уточнять у них.
                                2. Magomed
                                  Magomed
                                  10.11.2017, 18:48
                                  Спасибо Алексей что откликнулись
                                  я исправил ошибку
                                  вот полный код

                                  <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>
                                  результат не получаю.
                              2. Сергей
                                Сергей
                                10.03.2017, 10:10
                                Александр, добрый день.
                                Посоветуйте, что предпринять.
                                В ответ на аякс-запрос из базы данных возвращается массив объектов:
                                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. Александр Мальцев
                                  Александр Мальцев
                                  10.03.2017, 14:51
                                  Ошибка на 21 строчке в файле script.js, в которой происходит обращение к json_encode. А этой функции в JavaScript нет. Необходимо открыть файл script.js, перейти на 21 строчку и посмотреть что там за код…
                                  1. Сергей
                                    Сергей
                                    10.03.2017, 17:37
                                    Александр, 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
                                    ////////////////////
                                    второй день бьюсь об эту стену.
                                    уже штукатурка сыпется.
                                  2. Александр Мальцев
                                    Александр Мальцев
                                    10.03.2017, 11:57
                                    Тут ошибка не в each, а с форматом JSON. Вы как-то некорректно посылаете данные на сервер. Т.к. функции json_encode в JavaScript нет, это функция языка PHP. В JavaScript другие функции: JSON.stringify (для преобразования объекта в JSON строку) и JSON.parse (для преобразования JSON строки в объект JavaScript).
                                    1. Сергей
                                      Сергей
                                      10.03.2017, 12:38
                                      еще дополню…
                                      я убрал запрос id и оставил только выборку title, text.
                                      ответ приходит вот такой —
                                      [{«title»:«title 1»,«text»:«text 1»},{«title»:«title 2»,«text»:«text 2»}]
                                      формат, как мне кажется, вполне корректный.
                                      или нет?
                                      1. Александр Мальцев
                                        Александр Мальцев
                                        10.03.2017, 14:57
                                        Если id не будете выводить на страницу, то можно его и не отправлять. И объём данных будет меньше.
                                      2. Сергей
                                        Сергей
                                        10.03.2017, 12:11
                                        а посылается запрос вот так:

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

                                        переменная offset=2 (т.е. количество необходимых статей для LIMIT-а в sql запросе.
                                        и эти две статьи выбираются, и через echo json_encode($arr); возвращаются…
                                        но вот что с ними потом сделать, чтобы этот title и text можно было закидывать в верстку… ума не приложу.
                                        ну до верстки еще далеко… консоль не показывает этих данных и я понимаю, что уже на этом этапе у меня какой то косяк.
                                        1. Александр Мальцев
                                          Александр Мальцев
                                          10.03.2017, 14:47
                                          Попробуй добавить перед each:
                                          var response = JSON.parse(response);
                                          
                                          1. Сергей
                                            Сергей
                                            10.03.2017, 18:09
                                            Александр, вы мой спаситель!!!
                                            эта строчка помогла.
                                            *******
                                            Спасибо вам большое.
                                            Я уже было отчаялся)
                                        2. Сергей
                                          Сергей
                                          10.03.2017, 12:05
                                          Александр, я из php-файла отправил ответ вот в таком виде:
                                          echo json_encode($arr);
                                          exit();


                                          success, по идее, принимает читабельный для него формат json.
                                          только теперь я не пойму как мне разобрать эту массив объектов (я ведь правильно назвал то, что вернулось в ответ на запрос?) строку, чтобы потом использовать эти данные… ну, наверное нечто такое:
                                          $('#content').append('titlet')
                                          $('#content').append('text')
                                          1. Александр Мальцев
                                            Александр Мальцев
                                            10.03.2017, 15:13
                                            Вы уже сделали это выше с помощью 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);
                                            
                                            1. Сергей
                                              Сергей
                                              11.03.2017, 22:18
                                              А вот этого вчера не заметил…
                                              Здорово. Я сделал глупый год, а ваш мне помог довести задуманное до ума.

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

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

                                              ********************
                                              Александр, еще раз спасибо вам.
                                      3. Александр
                                        Александр
                                        31.07.2016, 05:45
                                        А как прменить это к стилям?
                                        Например, есть перечень цветов:
                                        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. Александр Мальцев
                                          Александр Мальцев
                                          31.07.2016, 07:17
                                          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>
                                          
                                          1. Александр
                                            Александр
                                            31.07.2016, 14:03
                                            Да, только применяет случайный цвет к .hover, а хотелось бы к элементу без .hover
                                            1. Александр Мальцев
                                              Александр Мальцев
                                              05.08.2016, 12:13
                                              Тогда будет ещё проще (может быть кому нибудь пригодится).
                                              // массив цветов
                                              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]);
                                              });
                                              
                                              1. Александр
                                                Александр
                                                01.08.2016, 04:12
                                                Вопрос снят.
                                          Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.