jQuery提取年份从日期开始，并将课程添加到父母

Question

我希望将同位素过滤器创建到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年的速度划分，则没有分配任何类别。如果我们可以爆炸日期并提取班级的年份，那么这将保持一年？

Answer 1

循环通过每个.publication-date，并从其文本中提取年份。将这一年作为课程添加到其父母。这样：

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

工作小提琴

编辑：在评论中回答操作问题：

使用replace用' - '替换所有空间，然后将结果添加到.publication的类别中。

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>