Auto Select Radio Buttons That Are Nested Inside An Li In A Loop

First of all, this is my fist queston here in SO, and I'm still quite a noob. I'm trying to apply this jquery code snippet (I found from other SO answers. Basically, it's the same

Solution 1:

can anyone explain what does "% 3" do in this part of code .eq( ( $('input:checked').index() + 1 ) % 3 )

That is more about maths than coding, But let's explain.

That % sign is a math operator called "modulo". It is the remainder of a division.

Say 7/2 = 3.5

The modulo here is 1. Because the division gives 3 as an "entire" number, the quotient. That is the part which could be divided without "cutting" it in parts (decimals)... Think about apples.

So 2 times 3 gives 6...

What's the remainder to have the original number? That is the modulo.

var number = 7;
var dividor = 2;

// Quotientvar quotient = Math.floor(number/dividor);
console.log(quotient);

// Modulovar modulo = number%dividor;
console.log(modulo);

// Back to number...var number2 = (quotient*dividor)+modulo;
console.log(number2);

console.log(number == number2);

What's the use in your code sample now, step by step:

An attempt is made to get the $('input:checked').index()... And 1 is added the target the next one. Then, we get the modulo of 3 for that index.

Now whatever which radio is clicked (indexes 0,1 or 2), the modulo alway is 1. Because .index() used on an element and without argument passed to the method returns «an integer indicating the position of the first element within the jQuery object relative to its sibling elements». And in this case, it has no sibling within label in the markup.

Here is your snippet unmodified, but with jQuery lib loaded and some console logs for each part of the equation:

setInterval(function(){
    $('input').eq( ( $('input:checked').index() + 1 ) % 3 ).prop('checked', true);
     
    console.log( $('input:checked').index() );
    console.log( ($('input:checked').index() + 1 )  );
    console.log( ($('input:checked').index() + 1 ) % 3 );
    console.log( "=====================================" );
     
  },1000);

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ul><li><labelfor="test-1"><inputid="test-1"type="radio"name="testing"checked /></label><div></div></li><li><labelfor="test-2"><inputid="test-2"type="radio"name="testing" /></label><div></div></li><li><labelfor="test-3"><inputid="test-3"type="radio"name="testing" /></label><div></div></li></ul>

---

The use of .index()

If you want to cycle through the inputs, you can use .index(), but by passing the checked element as argument to the method applyed on the collection of all inputs.

setInterval(function(){

  var indexOfChecked = $('input').index($("input:checked"));

  $('input').eq( ((indexOfChecked +1) %3 )).prop('checked', true);

  console.log( indexOfChecked );
  console.log( (indexOfChecked +1) );
  console.log( ((indexOfChecked +1) %3) );
  console.log( "=====================================" );

},1000);

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ul><li><labelfor="test-1"><inputid="test-1"type="radio"name="testing"checked /></label><div></div></li><li><labelfor="test-2"><inputid="test-2"type="radio"name="testing" /></label><div></div></li><li><labelfor="test-3"><inputid="test-3"type="radio"name="testing" /></label><div></div></li></ul>

The same thing could be achieved using .each() to find the index of the checked input, using the index of the each loop:

setInterval(function(){

  var indexOfChecked = 0;

  $('input').each(function(index){
    if( $(this).is(":checked") ){
      indexOfChecked = index;
    }
  });

  $('input').eq( ((indexOfChecked +1) %3 )).prop('checked', true);

  console.log( indexOfChecked );
  console.log( (indexOfChecked +1) );
  console.log( ((indexOfChecked +1) %3) );
  console.log( "=====================================" );

},1000);

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ul><li><labelfor="test-1"><inputid="test-1"type="radio"name="testing"checked /></label><div></div></li><li><labelfor="test-2"><inputid="test-2"type="radio"name="testing" /></label><div></div></li><li><labelfor="test-3"><inputid="test-3"type="radio"name="testing" /></label><div></div></li></ul>

The use of %

Here, it is to ensure the number used in .eq() will always be "in range" of existing elements. The same thing could be achieved using a condition:

if( indexOfChecked > $('input').length-1 ){
  indexOfChecked = 0;
}

So your question finally was about maths regarding %and about .index() use. There is a couple tricky twists like this subtile one in jQuery... You just have to know them.

.index() documentation. .eq() documentation.