自动选择嵌套在循环中的li内的单选按钮

Question

首先，这是我在这里的拳头问题，而且我还是一个菜鸟。

我试图应用这个jquery代码片段（我从其他SO答案中找到。

基本上，它与我试图实现的功能相同，但标记结构不同，因为我的html结构中的输入嵌套在li中。 此外，任何人都可以解释＆＃34;％3＆＃34;在这部分代码中做.eq（（$（＆＃39;输入：选中＆＃39;）。index（）+ 1）％3）

＆＃13;

＆＃13;

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

＆＃13;

<ul>
  <li>
    <label for="test-1">
      <input id="test-1" type="radio" name="testing" checked />
    </label>
    <div></div>
  </li>
  <li>
    <label for="test-2">
      <input id="test-2" type="radio" name="testing" />
    </label>
    <div></div>
  </li>
  <li>
    <label for="test-3">
      <input id="test-3" type="radio" name="testing" />
    </label>
    <div></div>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

注意：标记结构无法更改，因为我使用的wp插件正在输出其数据。

Answer 1

  

任何人都可以解释“％3”在此部分代码中的作用.eq( ( $('input:checked').index() + 1 ) % 3 )

这更多是关于数学而不是编码，但让我们解释一下。

%符号是一个名为"modulo"的数学运算符 这是一个部门的剩余部分。

Say 7/2 = 3.5

这里的模数是1.因为除法将3作为“整数”，即商 这是可以分割的部分，而不是“切割”它的部分（小数）...想想苹果。

所以2次3给6 ...

原始号码的剩余部分是什么？
这是模数。

var number = 7;
var dividor = 2;

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

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

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

console.log(number == number2);

现在，您的代码示例中有什么用处，一步一步：

尝试获取$('input:checked').index() ...
然后将1添加到下一个目标 然后，我们得到该索引的模数为3。

现在无论点击哪个无线电（索引0,1或2），模数总是为1.
因为.index()在元素上使用而没有传递给方法的参数，所以返回«一个整数，指示jQuery对象中第一个元素相对于其兄弟元素的位置»。在这种情况下，它在标记中的label内没有兄弟。

这是你的代码片段未经修改，但是加载了jQuery lib并且每个部分都有一些控制台日志：

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

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

<小时/> 使用.index()

如果要循环输入，可以使用.index()，但，方法是将checked元素作为参数传递给应用于所有输入集合的方法。

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

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

使用.each()使用每个循环的索引查找已检查输入的索引，可以实现同样的目的：

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

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

使用%

此处，确保.eq()中使用的数字始终位于现有元素的“范围内”。
使用条件可以实现同样的目的：

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

所以你的问题最后是关于% 和关于.index()使用的数学问题。
在jQuery中有一些像狡猾的那样棘手的扭曲......你只需要了解它们。

.index() documentation。
.eq() documentation