javascript - 查找特定值的第一个实例并添加 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> ) 会更好，但我什至不确定这是否现实。

工作 fiddle :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>