jQuery loop / .each function to simplify code

Question

I’d like to simplify the following code. I think using the .each function or a loop will do it but I need your help.

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 );
});

Here’s the corresponding 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>

Arun P Johny · Accepted Answer · 2015-10-12 09:53:50Z

4

You can loop through the parent elements using multiple selector like

$('#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);
    });

})

But if you can assign a common class to all those 3 parent elements then you can

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

})

answered Oct 12, 2015 at 9:53

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AdityaParab · Accepted Answer · 2015-10-12 10:01:09Z

0

Arun P Johny has answered it correctly.

Alternatively, you can also use the starts with selector of jQuery

$('div[id^="project-"] li').each( function(){
    //your code.
});

Also, in your particular case, you need not worry about finding divs that have ids of the pattern project-*

Your ulelements can be targeted directly, like,

$('ul.slider li').each(function(){
    //your code.
});

answered Oct 12, 2015 at 10:01

AdityaParab

7,1003 gold badges30 silver badges40 bronze badges

Collectives™ on Stack Overflow

jQuery loop / .each function to simplify code

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related