Javascript JS循环通过所有不同的子元素
我正在尝试从我的表中获取日期:Javascript JS循环通过所有不同的子元素,javascript,jquery,Javascript,Jquery,我正在尝试从我的表中获取日期: <th>Dates:</th> <td> <a href="/dates"> <span> 22 February 2019 </span> (UK) <span> 19 February 2019 </span> (DE) </a> </td> 编辑:国家不是必须的,它们是第二个目标,我最关心的是日期 可接
<th>Dates:</th>
<td>
<a href="/dates">
<span> 22 February 2019 </span> (UK)
<span> 19 February 2019 </span> (DE)
</a>
</td>
编辑:国家不是必须的,它们是第二个目标,我最关心的是日期
可接受输出:
dates {
date1: '22 February 2019',
date2: '19 February 2019'
}
我试图循环每个子元素,通过处理每个子元素来确定其类型,从而获得该输出:
$(document).on("click", ".btn-getdates", function() {
var dates = $(document).find('tr th:contains("Dates")').next('td');
$(dates).children().each(function() {
console.log($(this).text());
});
});
但我得到的结果是:
2019年2月22日(英国)2019年2月19日(德国)
如何将日期存储在对象中???请参见注释内联:
//获取锚点
让anchor=document.querySelector(“[href=”/dates']”);
让结果={};
//得到两个跨度
设span1=anchor.querySelector(“span”);
设span2=anchor.querySelector(“span:n第n个子项(2)”;
//提取第一个日期和国家
result.date1=span1.textContent.trim();
result.country1=span1.nextSibling.nodeValue.trim();// 如果实际有多个表单元格,并且每个单元格的模式是一致的:
然后,以下演示将适用于具有自动密钥名称分配的无限数量的日期和单元格:
演示
演示中评论的详细信息
//声明空对象
变量日期={};
//提取单元格内所有链接的文本
var str=$('td a').text();
//匹配的正则表达式模式:dd月yyyy或(XX)
var rgx=/\b[0-9]{1,2}\b\b[A-Za-z]+?\b\b[0-9]{4}\b}\([A-z]{2}\)/g;
//while循环计数器
var计数=0;
//钥匙串行计数器
var序列=1;
//正则表达式字符串方法exec()与字符串匹配
var res=rgx.exec(str);
/*
虽然结果不是空的。。。
…增量计数。。。
…如果计数是奇数。。。
…将匹配项指定给日期*键。。。
…否则,递增串行。。。
…将匹配项分配给国家*键。。。
…找到下一个匹配项
*/
while(res!==null){
计数++;
如果(计数%2==1){
日期['date'+(serial)]=res[0];
}否则{
串行+=1;
日期['country'+(serial-1)]=res[0];
}
res=rgx.exec(str);
}
控制台日志(日期)代码>
表格,
th,
运输署{
边框:1px实心#000
}
日期:
所需输出的语法是对象,而不是数组。这里也没有任何实际日期,只有字符串。最后,如果您也将国家/地区包装在span
元素中,您将有一个更轻松的时间。您是对的,我更新了问题以解决它。不幸的是,我不能改变页面设计,所以国家必须留在外面。另一方面,我最关心的是日期是否会更新问题来指出它。
$(document).on("click", ".btn-getdates", function() {
var dates = $(document).find('tr th:contains("Dates")').next('td');
$(dates).children().each(function() {
console.log($(this).text());
});
});
dd Month yyyy (XX)
date1:..., country1:..., date2:..., country2:... ... dateN:..., countryN:...