找到特定值的第一个实例并添加ID，重复

Question

给定一系列具有已知值的div，是否可以创建一个过滤器或数组来查找值的第一个实例并在多个项目上添加ID？这是基本结构：

<div class="boxes">
  <div class="box"><time>2017</time></div>
  <div class="box"><time>2016</time></div>
  <div class="box"><time>2015</time></div>
  <div class="box"><time>2014</time></div>
  <div class="box"><time>2014</time></div>
  <div class="box"><time>2014</time></div>
  <div class="box"><time>2013</time></div> 
</div>

这是我用来找到其中一个值的片段：

var elems = $('.box').filter(function(){
 return this.textContent.trim() === "2014"
}).first().attr('id', 'one');

我不确定寻找其他实例的最佳方法？

例如，感觉就像有一种更好的方式而不是简单地重复论证。我承认，新手不知道这种类型的功能会被称为什么。

var elems = $('.box').filter(function(){
 return this.textContent.trim() === "2014"
}).first().attr('id', 'one');

var elems = $('.box').filter(function(){
 return this.textContent.trim() === "2017"
}).first().attr('id', 'one');

如果没有添加特定值，即2017年（<time id="one">2017</time>），2016年（<time id="two">2016</time>），这将是一个奖励，但我甚至不确定这是否真实。

工作小提琴：https://jsfiddle.net/heykenneth/gn4gmvt0/1/。

Answer 1

您可以通过包装已编写代码的参数来完成此操作：

markFirstYear("2014", "one");
markFirstYear("2015", "two");
markFirstYear("2016", "three");
markFirstYear("2017", "four");
// ... etc

function markFirstYear(year, id) {
  var elems = $('.box').filter(function(){
   return this.textContent.trim() === year
  }).first().attr('id', id);
}

#one {color:red;}
#two {color:blue;}
#three {color:green;}
#four {color:purple;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boxes">
  <div class="box"><time>2017</time></div>
  <div class="box"><time>2016</time></div>
  <div class="box"><time>2015</time></div>
  <div class="box"><time>2014</time></div>
  <div class="box"><time>2014</time></div>
  <div class="box"><time>2014</time></div>
  <div class="box"><time>2013</time></div> 
</div>

Answer 2

首先创建所有值的数组，然后从该数组中获取唯一值，最后遍历unique数组。

var myArr = new Array();

$('.box time').each(function(){
    myArr.push($(this).text());
});

var unique = myArr.filter(function(item, index, array) {
    return index == myArr.indexOf(item);
});

for (var i = 0; i <= unique.length; i++) { 
	var elems = $('.box').filter(function() {
 		return this.textContent.trim() === unique[i];
	}).first().attr('class', 'one');
}

.one {color:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boxes">
  <div class="box"><time>2017</time></div>
  <div class="box"><time>2016</time></div>
  <div class="box"><time>2015</time></div>
  <div class="box"><time>2014</time></div>
  <div class="box"><time>2014</time></div>
  <div class="box"><time>2014</time></div>
  <div class="box"><time>2013</time></div> 
</div>