Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/406.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 查找特定值的第一个实例并添加ID,重复_Javascript_Jquery_Css_Filtering - Fatal编程技术网

Javascript 查找特定值的第一个实例并添加ID,重复

Javascript 查找特定值的第一个实例并添加ID,重复,javascript,jquery,css,filtering,Javascript,Jquery,Css,Filtering,给定一系列具有已知值的div,是否可以创建一个筛选器或数组来查找值的第一个实例并在多个项上添加一个ID?以下是基本结构: <div class="boxes"> <div class="box"><time>2017</time></div> <div class="box"><time>2016</time></div> <div class="box"><

给定一系列具有已知值的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() === "2017"
}).first().attr('id', 'one');
不必增加具体价值是一种奖励,即2017年(
2017
),2016年(
2016
),但我甚至不确定这是否现实


工作小提琴:

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

var myArr=new Array();
$('.box time')。每个(函数(){
myArr.push($(this.text());
});
var unique=myArr.filter(函数(项、索引、数组){
返回索引==myArr.indexOf(项目);
});

对于(var i=0;i您可以通过包装您已经编写的代码的参数来实现这一点:

markFirstYear(“2014年”、“一年”);
第一年(“2015年”、“两年”);
第一年(“2016年”、“三年”);
第一年(“2017年”、“四年”);
//…等等
功能标记第一年(年份,id){
var elems=$('.box').filter(函数(){
返回此.textContent.trim()==年份
}).first().attr('id',id);
}
#一{颜色:红色;}
#两个{颜色:蓝色;}
#三{颜色:绿色;}
#四{颜色:紫色;}

2017
2016
2015
2014
2014
2014
2013

如果有人好奇的话,我会用它来创建一个带有里程碑的动态生成的时间线,我会用年份来创建一个锚导航,允许跳转到特定年份。将您的代码封装在一个循环中,例如
for(var year=2014;year do cale_b的答案有帮助吗?@Ken您的意思是什么“不必增加特定的价值,这将是一个额外的奖励"@xadhix我希望保持id的唯一性,以便每个实例都获得不同的id。如果您不需要只知道该项的值,它是系列中该值的第一个实例,那就太好了。是的,cale_b的建议很有帮助!非常巧妙。是否可以创建唯一id而不是在系列中添加类?即
 2017年
2016年
,等等?ID将用于定位导航。@Ken是的。另外,我的印象是,您希望在接受的答案中所有内容都自动化,您必须针对您希望使用的年份。自动化是理想的,但是我不确定如何以自动化方式为每个实例提供唯一的ID,而无需以特定值为目标。@Ken非常简单,只需使用loop中的
i
变量这就是我所追求的,因为它完成了为每个项目提供唯一ID的额外要求。感谢您的帮助。
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');