jQuery Извлечь год из даты и добавить класс в родительский

Я хочу создать изотопный фильтр в список div и, как таковой, хочу добавить класс года в родительский контейнер / div, извлекая `` Год '' из отображаемой даты, а затем добавив это как класс к родительскому div (.publication)

Прямо сейчас я использую очень простой метод для этого, проверяя, содержит ли div определенный год, а затем индивидуально назначаю год:

HTML

<div>
  <div class="publication addyearclasshere">
  <div class="publication-date">15/3/2017</div>
</div>

<div class="publication addyearclasshere">
  <div class="publication-date">15/3/2016</div>
</div>

Код

jQuery('div[class*="publication-date"]:contains("2020")').closest('.publication').addClass('2020');
jQuery('div[class*="publication-date"]:contains("2019")').closest('.publication').addClass('2019');
jQuery('div[class*="publication-date"]:contains("2018")').closest('.publication').addClass('2018');
jQuery('div[class*="publication-date"]:contains("2017")').closest('.publication').addClass('2017');
jQuery('div[class*="publication-date"]:contains("2016")').closest('.publication').addClass('2016');
jQuery('div[class*="publication-date"]:contains("2015")').closest('.publication').addClass('2015');

Проблема с этим подходом заключается в том, что если мы опускаемся ниже 2015 года или выше 2020 года, класс не присваивается. Если мы можем взорвать дату и извлечь год для класса, тогда это будет продолжаться из года в год?


class jquery contains extract
person glennyboy    schedule 30.05.2017    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Прокрутите каждый .publication-date и извлеките год из его текста. Добавьте год как класс к его родительскому элементу. Нравится:

jQuery(".publication-date").each(function(i) {
    var yr = $(this).text().trim().split('/')[2];
    jQuery(this).closest('.publication').addClass(yr);
});

Рабочий скрипт

РЕДАКТИРОВАТЬ: Чтобы ответить на вопрос OPs в комментариях:

Используйте replace, чтобы заменить все пробелы на '-' и добавить результат в класс .publication.

jQuery(".publication-name").each(function(i) {
    var name = $(this).text().trim().replace(' ', '-');
    jQuery(this).closest('.publication').addClass(name);
});
person mridula    schedule 30.05.2017
comment
@glennyboy Из вашего примера, у меня сложилось впечатление, что .publication был непосредственным родителем .publication-date. Но поскольку это не так, используйте closest() вместо parent(). Я обновил ответ. - person mridula; 31.05.2017
comment
Не могли бы вы также объяснить важность (i) в функции? - person glennyboy; 01.06.2017
comment
i - это индекс в цикле. То же, что i в for(var i = 0; i < n; i++). В вашем случае это не обязательно, и вы можете удалить его. - person mridula; 01.06.2017
comment
Как мне использовать ту же логику, чтобы взять первое слово в div '.publication-name', а также добавить его как класс в .publication. Итак, если имя - «случайная публикация», оно просто возьмет слово «случайный» и добавит его как класс? Еще лучше взять полное имя публикации и добавить дефис между каждым словом, чтобы получился класс .random-publishing? - person glennyboy; 01.06.2017
comment
Еще раз спасибо за вашу помощь. Во второй реализации, если они перемещаются более чем на 2 слова, похоже, не работает. Например, «Экономист и юрист» пишется как класс «Экономист и юрист». - person glennyboy; 02.06.2017
comment
Используйте regex, чтобы сопоставить все пробелы в строке: name.replace(/ /g,'-') вместо name.replace(' ','-'). - person mridula; 02.06.2017
comment
Хотя я не думаю, что специальные символы, такие как '&', допустимы в именах классов. stackoverflow .com / questions / 448981 / - person mridula; 02.06.2017
comment
похоже, это работает путем удаления специальных символов: - var name = $ (this) .text (). trim (). replace (/ [^ a-z0-9 \ s] / gi, '-'). replace (/ [_ \ s] / g, ''); - person glennyboy; 02.06.2017
comment
scrub that - вышеупомянутое работает, только если есть специальный символ .. в противном случае объединяет слова в классе - person glennyboy; 02.06.2017
comment
Работает .replace (/ [_ \ s] / g, '-') - person glennyboy; 02.06.2017
comment
Привет, @mridula, не могли бы вы просветить меня, как я могу объединить оба приведенных выше фрагмента для имени и даты, чтобы добавить их как несколько атрибутов фильтра данных, разделенных запятой. Например, "название публикации, год публикации"). У меня есть jQuery (this) .closest ('. Publishing'). Attr (data-filter, yr + name); ??????? - person glennyboy; 14.06.2017
comment
это то, чего я пытаюсь достичь на stackoverflow.com/questions/44567166/ - person glennyboy; 15.06.2017

arrow_upward
2
arrow_downward

Вы можете перебрать каждый из элементов и разделить текст.

И вам не нужно использовать .closest(), просто используйте .parent()

Обновлено. Поскольку ваш код в примере на вашем веб-сайте. вам нужно будет использовать самое близкое, чтобы соответствовать коду веб-сайта. Обновлен html, чтобы соответствовать html вашего сайта.

jQuery('div[class*="publication-date"]').each(function() {
  var year = $(this).text().split("/");
  $(this).closest(".publication").addClass(year[year.length - 1]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="publication w-col w-col-6 w-dyn-item">
    <div class="publication-row w-row">
      <div class="w-col w-col-10">
        <div>
          <h1>Cosmética</h1>
        </div>
        <div class="publication-meta-row w-row">
          <div class="w-col w-col-9">
            <div class="publication-meta-row w-row">
              <div class="w-col w-col-3">
                <div class="avatar" style="background-image: url('https://daks2k3a4ib2z.cloudfront.net/58cbe3b491c05a4f18aa9e82/58dd000bd8b55b726fac170e_NSS_L1600745.png');">
                  <div class="avatar-title w-embed">
                    <div title="Nielson Sánchez Stewart " style="display: block; width; 100%; height: 100%; position: relative; top: 0; right; 0;"></div>
                  </div>
                </div>
              </div>
              <div class="w-col w-col-9">
                <div class="publication-name">Sur</div>
              </div>
            </div>
          </div>
          <div class="w-col w-col-3">
            <div class="publication-date">15/3/2017</div>
          </div>
        </div>
      </div>
      <div class="w-col w-col-2">
        <div class="download-wrapper">
          <div class="pdf w-embed"><a href="https://www.dropbox.com/s/vsh8wc5bktgmps7/Art%C3%ADculo%202017.03.15%20-%20Cosm%C3%A9tica.pdf?dl=0" target="_blank" title="Download/Preview in Dropbox"><i class="fa fa-file-pdf-o" aria-hidden="true"></i></a></div>
        </div>
      </div>
    </div>
  </div>

</div>

person Carsten Løvbo Andersen    schedule 30.05.2017
comment
@glennyboy В вашем примере родителем publication-date является publication, но на вашем веб-сайте у родителя нет этого класса. Я обновил фрагмент, чтобы он работал. - person Carsten Løvbo Andersen; 31.05.2017
comment
Спасибо, что тоже сработало. Кажется, вы не можете дать более одного правильного ответа, но я бы ответил иначе. - person glennyboy; 01.06.2017