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

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

＆＃13;

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');
}

＆＃13;

.one {color:red;}

＆＃13;

<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>

＆＃13;

Answer 2

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

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>

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

2 个答案: