Вопрос об итерации моего элемента jquery - PullRequest
Новая
       13

Вопрос об итерации моего элемента jquery

0 голосов
/ 20 мая 2019

Я настраиваю палитру диапазонов дат

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

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

Потому что кажется, что между if и стилем есть 3 разницы 

for(let i = 0;$('.md-drppicker .calendar-table .table-condensed tbody tr td').length != i; i++) {
      if($('.md-drppicker .calendar-table .table-condensed tbody tr td')[i].textContent > diff &&
       $('.md-drppicker .calendar-table .table-condensed tbody tr td')[i].textContent < begin) {
        $('.md-drppicker .calendar-table .table-condensed tbody tr td')[i].classList.add("in-range");
        $('.md-drppicker .calendar-table .table-condensed tbody tr td')[i].setAttribute( 'style', 'background-color :red!important');
      }
      else if($('.md-drppicker .calendar-table .table-condensed tbody tr td')[i].textContent == diff) {
        $('.md-drppicker .calendar-table .table-condensed tbody tr td')[i].classList.add("start-date");
        $('.md-drppicker .calendar-table .table-condensed tbody tr td')[i].classList.add("active");
        $('.md-drppicker .calendar-table .table-condensed tbody tr td')[i].setAttribute( 'style', 'background-color :red!important');
      }
      else if($('.md-drppicker .calendar-table .table-condensed tbody tr td')[i].textContent == begin) {
        $('.md-drppicker .calendar-table .table-condensed tbody tr td')[i].classList.add("end-date");
        $('.md-drppicker .calendar-table .table-condensed tbody tr td')[i].classList.add("active");
        $('.md-drppicker .calendar-table .table-condensed tbody tr td')[i].setAttribute( 'style', 'background-color :red!important');
      }
    }

Элемент Jquery выглядит так: 

0: td.weekend.off.available
1: td.off.available
2: td.off.available
3: td.off.available
4: td.off.available
5: td.available
6: td.weekend.available
...

Правильно ли я повторяю свой элемент? Спасибо

1 Ответ

0 голосов
/ 20 мая 2019

Не уверен, что вы подразумеваете под "итерацией правильно", потому что у вас есть несколько способов перебора коллекции jQuery. Однако некоторые имеют больше смысла, чем другие. Если вы хотите знать, используете ли вы эффективный или элегантный способ, тогда ответ "Нет".

Чтобы улучшить удобочитаемость и производительность, запросите DOM один раз вместо нескольких раз с одним и тем же селектором и сохраните результат в привязке. Каждый раз, когда вы пишете $( [[SELECTOR]] ), jQuery проходит через весь DOM и сопоставляет узлы, снова выбирая селектор, который вы передаете ему.

Кроме того, вы можете использовать метод .each коллекции jQuery вместо цикла (см. Комментарий @ Jayruben). Это делает ваш код более простым для понимания , чем использование цикла, потому что он перебирает каждый элемент по умолчанию по порядку. Кроме того, вам не нужно захватывать элемент вручную через оператор скобок.

Я не уверен, какие значения содержат переменные diff и begin, но выглядит , как будто вы пытаетесь сравнить String (значение textContent) с Number или Date значения. Это очень вероятно потерпит неудачу. Вместо этого выполните синтаксический анализ всех значений для того же типа . Если вы хотите изменить Datepicker , вполне вероятно, что вам придется конвертировать все значения в Date объектов. Однако, как я уже сказал, поскольку я не знаю, откуда взялись diff и begin и что они содержат, это всего лишь предположение.

Вот как может выглядеть ваш код после описанных мной изменений (кроме парсинга): 

let $td = $('.md-drppicker .calendar-table .table-condensed tbody tr td')
$td.each(function () {
  let text = this.textContent; // "this" points to the current <td> element
  if (text > diff && text < begin) {
    this.classList.add('in-range');
    this.style.backgroundColor = 'red !important';
    return; // return early, avoids if () else if () else nesting/chaining
  }
  if (text === diff) {
    this.classList.add('start-date');
    this.classList.add('active');
    this.style.backgroundColor = 'red !important';
    return;
  }
  if (text === begin) {
    this.classList.add('end-date');
    this.classList.add('active');
    this.style.backgroundColor = 'red !important');
    // last if, no return needed
  }
});

EDIT

Вы также можете сделать это с помощью цикла, но он немного более "грязный" из-за мимолетных дополнительных переменных , которые использует цикл. Во всяком случае, вот версия на основе цикла: 

let $td = $('.md-drppicker .calendar-table .table-condensed tbody tr td')
for (let $tdIndex = 0; $tdIndex < $td.length; $tdIndex += 1) {
  let elem = $td[$tdIndex];
  let text = elem.textContent;

  if (text > diff && text < begin) {
    elem.classList.add('in-range');
    elem.style.backgroundColor = 'red !important';
    continue; // jump to next iteration
  }
  if (text === diff) {
    elem.classList.add('start-date');
    elem.classList.add('active');
    elem.style.backgroundColor = 'red !important';
    continue;
  }
  if (text === begin) {
    elem.classList.add('end-date');
    elem.classList.add('active');
    elem.style.backgroundColor = 'red !important');
  }
}
...