javascript - :nth-child content replacement 更优雅的解决方案

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

如果要向 DOM 添加文本，请使用 jQuery:

$( "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>