javascript - 一次替换多个节点的文本

Question

我正在尝试构建我的简历的在线版本，我希望我的工作经历中的月份名称会根据屏幕大小缩小，例如从 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

那么如何一次选择所有文本节点，更改它们，然后分别返回每个文本节点？

Answer 1

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/