Объект против индекса в выражениях.each

Question

Я не думаю, что понимаю, как получить нужную мне информацию.

Я использую изотоп для разметки и сортировки div. Контекст: при щелчке элемента div будет добавлено 2 элемента содержимого, которые затем будут отсортированы в нужном месте. Мне нужно добавить дополнительное число в div больше, чем текущее число.

    $(document).ready(function() {
    var $grid = $('.grid').isotope({
    itemSelector: '.grid-item',
    layoutMode: 'fitRows',

    // sort by number
    sortBy: 'number',
    getSortData: {
      'number': '.number parseInt'
    }
  });




  $('.grid-item').click(function(event) {

        $(this).addClass('big');
                $grid.isotope('updateSortData');
        var number = parseInt($(this).find('.number').text(), 10);

        $('.number').each(function(index) {

          var checkNumber = parseInt($(this).text(), 10);

          if (checkNumber > number) {
            $(this).html(checkNumber + 1);
          };

          $grid.isotope('updateSortData');
        });
    }); });

Что должно произойти, это:

.grid-item будет нажата

Добавляет класс .big

Магазины .number как number

Все остальные .number дивы проверяют их количество checkedNumber против сохраненного номера

Если checkNumber > чем number затем добавьте + 1 в checkNumber

https://jsfiddle.net/qg2xndk6/ - не работает Простая версия выше

http://codepen.io/anon/pen/XXmjXK - Большой контекст - все еще не работает, но вы можете видеть, что я планирую использовать AJAX для извлечения контента и повторной сортировки макета. Вы можете увидеть, что после нескольких кликов заказ неверен

Спасибо за ваше время и помощь.

Answer 1

Вот отличная возможность использовать делегирование событий. Вместо того, чтобы прикреплять событие к каждому .grid-itemвы можете обработать событие, когда оно распространяется на родительский контейнер. Необязательный второй аргумент позволит вам фильтровать по элементу, по которому щелкнули:

$('.grid').on('click', '.grid-item', newclick);

Теперь вам больше не нужно снова связывать обработчик событий после добавления новых элементов.

Другие идеи, чтобы помочь устранить неполадки кода в вашей ручке:

• Убедитесь, что вы используете правильный отступ
• Замените ваши анонимные функции (как в вызовах setTimeout, обратные вызовы передаются .each) с именованными функциями, определенными выше в коде. Это сделает ваш код намного более читабельным. Как вы сделали с newclick!
• Это делает for цикл повторяется от 0 до 1? Может тебе это не нужно?
• Следуйте другим соглашениям JS, таким как camelCase var и имена функций.