更优雅的解决方案：nth-​​child内容替换

Question

我是jQuery的新手，我想知道是否有更优雅的解决方案：

$( "ul li:nth-child(1) a span" ).append( "01" );
$( "ul li:nth-child(2) a span" ).append( "02" );
$( "ul li:nth-child(3) a span" ).append( "03" );
$( "ul li:nth-child(4) a span" ).append( "04" );
$( "ul li:nth-child(5) a span" ).append( "05" );
$( "ul li:nth-child(6) a span" ).append( "06" );
$( "ul li:nth-child(7) a span" ).append( "07" );
$( "ul li:nth-child(8) a span" ).append( "08" );
$( "ul li:nth-child(9) a span" ).append( "09" );
$( "ul li:nth-child(10) a span" ).append( "10" );

Answer 1

如果要使用jQuery将文本添加到DOM：

$( "ul li a span" ).append(function(i){
  return (i+1)<10 ? '0' + (i+1) : i+1;
});

$("ul li a span").append(function(i) {
  return (i + 1) < 10 ? '0' + (i + 1) : i + 1;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#"><span>original span text </span></a>
  </li>
  <li><a href="#"><span>original span text </span></a>
  </li>
  <li><a href="#"><span>original span text </span></a>
  </li>
  <li><a href="#"><span>original span text </span></a>
  </li>
  <li><a href="#"><span>original span text </span></a>
  </li>
  <li><a href="#"><span>original span text </span></a>
  </li>
</ul>

或者，使用CSS，尽管DOM中没有此文本，因此无法选择：

ul {
  counter-reset: spanCount;
}

ul li a span {
  counter-increment: spanCount;
}

ul li a span::after {
  content: counter(spanCount, decimal-leading-zero);
}

ul {
  counter-reset: spanCount;
}
ul li a span {
  counter-increment: spanCount;
}
ul li a span::after {
  content: counter(spanCount, decimal-leading-zero);
}

<ul>
  <li><a href="#"><span>original span text </span></a>
  </li>
  <li><a href="#"><span>original span text </span></a>
  </li>
  <li><a href="#"><span>original span text </span></a>
  </li>
  <li><a href="#"><span>original span text </span></a>
  </li>
  <li><a href="#"><span>original span text </span></a>
  </li>
  <li><a href="#"><span>original span text </span></a>
  </li>
</ul>

Answer 2

Vanilla-JS解决方案：

[].forEach.call(document.querySelectorAll('ul li'), function(li, i) {
   li.querySelector('a span').textContent = ('0' + (+i + 1)).slice(-2);
}); 

  

Codepen demo

Answer 3

使用append回调函数，其中第一个参数i表示当前元素索引（从0开始，因此执行一些i=i+1;。我使用++i）

＆＃13;

＆＃13;

$("ul li a span").append(function(i) {
  return ++i>9 ? i : "0"+i;            // Print `++i` and add leading "0" if needed
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a>LI <span></span></a></li>
  <li><a>LI <span></span></a></li>
  <li><a>LI <span></span></a></li>
  <li><a>LI <span></span></a></li>
  <li><a>LI <span></span></a></li>
  <li><a>LI <span></span></a></li>
  <li><a>LI <span></span></a></li>
  <li><a>LI <span></span></a></li>
  <li><a>LI <span></span></a></li>
  <li><a>LI <span></span></a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

在JS ES6中，它看起来像：

＆＃13;

＆＃13;

Array.from(document.querySelectorAll('ul li a span'), (el, i) => {
   el.insertAdjacentHTML("beforeend", ++i>9 ? i : "0"+i );
});

＆＃13;

<ul>
  <li><a>LI <span></span></a></li>
  <li><a>LI <span></span></a></li>
  <li><a>LI <span></span></a></li>
  <li><a>LI <span></span></a></li>
  <li><a>LI <span></span></a></li>
  <li><a>LI <span></span></a></li>
  <li><a>LI <span></span></a></li>
  <li><a>LI <span></span></a></li>
  <li><a>LI <span></span></a></li>
  <li><a>LI <span></span></a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 4

var i = 1;
$('ul li a span').each(function() {
    $(this).append(((i<10)?'0':'') + i++);
});

＆＃13;

＆＃13;

var i = 1;
$('ul li a span').each(function() {
    $(this).append(((i<10)?'0':'') + i++);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a>foo<span></span></a></li>
  <li><a>foo<span></span></a></li>
  <li><a>foo<span></span></a></li>
  <li><a>foo<span></span></a></li>
  <li><a>foo<span></span></a></li>
  <li><a>foo<span></span></a></li>
  <li><a>foo<span></span></a></li>
  <li><a>foo<span></span></a></li>
  <li><a>foo<span></span></a></li>
  <li><a>foo<span></span></a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;