jQuery Loop/.each 函数来简化代码

Question

我想简化以下代码。我认为使用 .each 函数或循环就可以做到这一点，但我需要你的帮助。

var totalImages1 = $( '#project-1 li' ).length;
$( '#project-1 li' ).each( function( k, v ) {
  $( '.number', v ).html( String( k+1 ) + ' / ' + totalImages1 );
});

var totalImages2 = $( '#project-2 li' ).length;
$( '#project-2 li' ).each( function( k, v ) {
  $( '.number', v ).html( String( k+1 ) + ' / ' + totalImages2 );
});

var totalImages3 = $( '#project-2 li' ).length;
$( '#project-3 li' ).each( function( k, v ) {
  $( '.number', v ).html( String( k+1 ) + ' / ' + totalImages3 );
});

这是相应的html:

<div class="slider-container" id="project-1">
  <ul class="slider">
    <li>
      <img src="images/1.jpg" alt="">
      <p class="caption"><span class="number"></span> This is a caption</p>
    </li>
  </ul>
</div>


<div class="slider-container" id="project-2">
  <ul class="slider">
    <li>
      <img src="images/1.jpg" alt="">
      <p class="caption"><span class="number"></span> This is a caption</p>
    </li>
    <li>
      <img src="images/2.jpg" alt="">
      <p class="caption"><span class="number"></span> This is another caption</p>
    </li>
    <li>
      <img src="images/3.jpg" alt="">
      <p class="caption"><span class="number"></span> The third caption</p>
    </li>
    <li>
      <img src="images/3.jpg" alt="">
      <p class="caption"><span class="number"></span> The third caption</p>
    </li>
  </ul>
</div>


<div class="slider-container" id="project-3">
  <ul class="slider">
    <li>
      <img src="images/1.jpg" alt="">
      <p class="caption"><span class="number"></span> This is a caption</p>
    </li>
    <li>
      <img src="images/2.jpg" alt="">
      <p class="caption"><span class="number"></span> This is another caption</p>
    </li>
    <li>
      <img src="images/3.jpg" alt="">
      <p class="caption"><span class="number"></span> The third caption</p>
    </li>
  </ul>
</div>

Answer 1

您可以使用多个选择器循环遍历父元素，例如

$('#project-1, #project-2, #project-3').each(function () {
    var $this = $(this),
        $lis = $this.find('li'),
        totalImages = $lis.length;
    $lis.each(function (k, v) {
        $('.number', v).html((k + 1) + ' / ' + totalImages);
    });

})

但是如果您可以为所有这 3 个父元素分配一个公共(public)类，那么您就可以

$('.project').each(function () {
    var $this = $(this),
        $lis = $this.find('li'),
        totalImages = $lis.length;
    $lis.each(function (k, v) {
        $('.number', v).html((k + 1) + ' / ' + totalImages);
    });

})