jQuery 从日期中提取年份并将 Class 添加到父级

Question

我想为 div 列表创建一个同位素过滤器，因此我想通过提取 [=] 添加 class 到父 container/div 29=] 从显示的日期开始，然后将其作为 class 添加到父级 div (.publication)

现在我正在使用一种非常基本的方法来执行此操作，方法是查看 div 是否包含特定年份，然后在dividually 中指定年份：

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。如果我们可以分解日期并提取 class 的年份，那么这会年复一年地继续下去吗？

Answer 1

遍历每个 .publication-date 并从其文本中提取年份。将年份作为 class 添加到其父级。像这样：

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

Working Fiddle

编辑：回答评论中的 OP 问题：

使用replace将所有空格替换为'-'并将结果添加到.publication的class.

jQuery(".publication-name").each(function(i) {
    var name = $(this).text().trim().replace(' ', '-');
    jQuery(this).closest('.publication').addClass(name);
});

Answer 2

您可以遍历每个元素并拆分文本。

而且您不需要使用 .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>

jQuery 从日期中提取年份并将 Class 添加到父级

jQuery Extract Year from Date and Add Class to Parent

jquery

class

extract

contains