自动选择嵌套在循环中的li内的单选按钮 [英] Auto select radio buttons that are nested inside an li in a Loop
问题描述
首先，这是我在SO的拳头问题，而且我还是一个菜鸟。
First of all, this is my fist queston here in SO, and I'm still quite a noob.
我正在尝试应用这个jquery代码片段（我从其他SO答案中找到。
I'm trying to apply this jquery code snippet (I found from other SO answers.
基本上，它与我想要实现的功能相同，但标记结构不同，因为我的html结构中的输入是嵌套在里面。
另外，任何人都可以解释％3在这部分代码中做了什么.eq（（$（'input：checked'）。index（）+ 1）％3）
Basically, it's the same function that i'm trying to achieve but the markup structure is different because the inputs in my html structure are nested inside the li. Also, can anyone explain what does "% 3" do in this part of code .eq( ( $('input:checked').index() + 1 ) % 3 )
setInterval(function(){
$('input').eq( ( $('input:checked').index() + 1 ) % 3 ).prop('checked', true);
},1000);
<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>
注意：标记结构无法更改，因为我正在使用的wp插件正在输出其数据。
Note: the markup structure can't be changed because it's how the wp plugin that i'm using is outputing its data.
推荐答案
任何人都可以解释％3在这部分代码中做了什么
.eq（（$（'input：checked'）。index（）+ 1 ）％3）
这更多是关于数学而不是编码，但让我们解释一下。
That is more about maths than coding, But let's explain.
％符号是一个名为modulo。
这是一个部门的剩余部分。
That % sign is a math operator called "modulo".
It is the remainder of a division.
说7/2 = 3.5
Say 7/2 = 3.5
这里的模数是1.因为除法给出了3作为整数的商数。
那个可以划分的部分没有切割它的部分（小数）...想想苹果。
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.
所以2次3给6 ...
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;
// 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。
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.
现在点击哪个无线电（索引0,1或2），t他模数总是1.
因为 .index（）在一个元素上使用并且没有传递给该方法的参数返回«一个整数指示jQuery对象中第一个元素相对于其兄弟元素的位置»。在这种情况下，它在标记中没有标签内的兄弟。
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.
这是你的代码片段未经修改，但是加载了jQuery lib和等式的每个部分的一些控制台日志：
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);
<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（）
The use of
.index()
如果你想循环输入，您可以使用 .index（），但将checked元素作为参数传递给应用于所有集合的方法输入。
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);
<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（）来实现检查输入的索引，使用每个循环的索引：
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);
<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>
使用％
The use of %
这里，要确保<$ c $中使用的数字c> .eq（）将始终是现有元素的范围。
使用条件可以实现同样的目的：
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;
}
所以你的问题最终是关于％<的数学/ code> 和关于 .index（）使用。
有一些像这样的微妙的扭曲一个在jQuery ...你只需要知道它们。
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.
这篇关于自动选择嵌套在循环中的li内的单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
