我正在尝试构建我的简历的在线版本,我希望我的工作经历中的月份名称会根据屏幕大小缩小,例如从 2011 年 1 月 - 2012 年 1 月到 2011 年 1 月 - 2012 年 1 月。
这是我的 HTML 示例
<section id="work">
<div id="job1">
<ul>
<li>September 2013 - Present</li>
<li>Job Title</li>
<li>Employer Name</li>
<li>Location</li>
</ul>
<ul>
<li>job duties</li>
<li>job duties</li>
</ul>
</div>
<div id="job2">
<ul>
<li>January 2012 - September 2013</li>
<li>Job Title</li>
<li>Employer Name</li>
<li>Location</li>
</ul>
<ul>
<li>job duties</li>
<li>job duties</li>
</ul>
</div>
</section>
我最初是通过一个接一个地缩短每个文本节点来做到这一点的,就像这样:
function shrinkMonths(idName) {
var dates = $(idName).find("ul:first-child li:first-child");
var words = dates.text().split(" ");
words[0] = words[0].substr(0,3);
if (idName !== "#job1") {
words[3] = words[3].substr(0,3);
}
return words.join(" ");
}
$("#job1").find("ul:first-child li:first-child").text(shrinkMonths("#job1"));
$("#job2").find("ul:first-child li:first-child").text(shrinkMonths("#job2"));
你可以在 http://codepen.io/polly_nomial/pen/nghJx 看到这个
我想一次完成所有这些,所以我一次选择了所有日期,这创建了一个包含我所有日期的字符串,但最后一个日期的年份与下一个日期的第一个月(9 月, 2013, -, PresentJanuary, 2012, -, September, 2013NextMonth).所以我能够适本地拆分文本并缩短月份,但是当我尝试返回文本时,它会将整个字符串返回给每个节点而不是单独返回。
function shrinkMonths(list) {
var words = list.split(" ");
var temp1 = null;
var temp2 = null;
for(var i = 0; (4*i+3)+i < words.length; i++) {
if(i === 0) {
temp1 = words[4*i+3].slice(0,7);
temp2 = words[4*i+3].slice(7);
words.splice(4*i+3,1,temp1,temp2);
}
else {
temp1 = words[(4*i+3) + i].slice(0,4);
temp2 = words[(4*i+3) + i].slice(4);
words.splice((4*i+3) + i,1,temp1,temp2);
}
}
words[0] = words[0].slice(0,3);
var k = 1;
while(5*k+2 < words.length) {
words[5*k - 1] = words[5*k - 1].slice(0,3);
words[5*k + 2] = words[5*k + 2].slice(0,3);
k++;
}
return words.join(" ");
}
var change = shrinkMonths($(".work").find("div ul:first-child li:first-child").text());
$(".work").find("div ul:first-child li:first-child").text(change);
你可以在这里看到这个http://codepen.io/polly_nomial/pen/Jorgn
那么如何一次选择所有文本节点,更改它们,然后分别返回每个文本节点?
最佳答案
CSS 唯一的想法。如果您使用的不是简单的月份名称 September
,会怎样:
<span class="month" data-full="September" data-short="Sep"></span>
然后使用媒体查询你可以这样做:
.month:after {
content: attr(data-full);
}
@media (max-width: 600px) {
.month:after {
content: attr(data-short);
}
}
我们开始吧。不涉及 Javascript。 7行代码。 IE9+(媒体查询)、IE8+(:after
)。
演示:http://jsfiddle.net/ryAb3/
关于javascript - 一次替换多个节点的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22117768/