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年， - ，今年1月，2012年， - ，9月，2013年下半年）。所以我能够恰当地分割文本并缩短月份，但是当我尝试返回文本时，它会将整个字符串返回给每个节点而不是单独的。

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/

Answer 2

您希望在日期之间进行迭代，而不是将所有数据汇总在一起，然后将其拆分出来：

    dates.each(function() {
       var date = $(this);
       var text = date.text();
       ...
       date.text(changedText);
    });

一次替换多个节点的文本

2 个答案:

演示：http://jsfiddle.net/ryAb3/