[英]Get the index of elements with same class
Let say I have this 让我说我有这个
<ul class='list'>
<li>item0</li>
<li class='active'>item1</li>
<li>item2</li>
<li class='active'>item3</li>
<li class='active'>item4</li>
<li>item5</li>
<li>item6</li>
</ul>
<ul class='list'>
<li class='active'>item0</li>
<li>item1</li>
<li class='active'>item2</li>
<li>item3</li>
<li>item4</li>
<li class='active'>item5</li>
<li class='active'>item6</li>
</ul>
I'm trying to display their current index ex.(134,0256), but it displays (0123456). 我正在尝试显示他们当前的索引(134,0256),但它显示(0123456)。 I tried some codes but it only display the selected index.
我尝试了一些代码,但它只显示所选的索引。
How can I do that? 我怎样才能做到这一点?
thanks. 谢谢。
SAMPLE CODE 示例代码
$(document).ready(function(){
$('button').click(function(){
$( "ul.list li.active" ).each(function(index) {
console.log(index);
});
});
});
The first argument in the callback would be the index in the jQuery object collection. 回调中的第一个参数是jQuery对象集合中的索引。 To get index relative to its siblings use
index()
method. 要获得相对于其兄弟姐妹的
index()
使用index()
方法。
$(document).ready(function() {
$('button').click(function() {
$("ul.list li.active").each(function(index) {
console.log($(this).index()); // get index within its parent
});
});
});
$("ul.list li.active").each(function(index) { console.log($(this).index()); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class='list'> <li>item0</li> <li class='active'>item1</li> <li>item2</li> <li class='active'>item3</li> <li class='active'>item4</li> <li>item5</li> <li>item6</li> </ul> <ul class='list'> <li class='active'>item0</li> <li>item1</li> <li class='active'>item2</li> <li>item3</li> <li>item4</li> <li class='active'>item5</li> <li class='active'>item6</li> </ul>
For separating each list with a comma use additional iterator for the list, it's easy to do with jQuery map()
method. 要使用逗号分隔每个列表,请使用列表的附加迭代器,使用jQuery
map()
方法很容易。
console.log(
$("ul.list").map(function() { // iterate over each list
return $("li.active", this).map(function() { // iterate over children li
return $(this).index(); // return the index
}).get().join(''); // get the result as array and join the values
}).get().join() // get the result as array and join the values with comma
)
console.log( $("ul.list").map(function() { return $("li.active", this).map(function() { return $(this).index(); }).get().join(''); }).get().join() )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class='list'> <li>item0</li> <li class='active'>item1</li> <li>item2</li> <li class='active'>item3</li> <li class='active'>item4</li> <li>item5</li> <li>item6</li> </ul> <ul class='list'> <li class='active'>item0</li> <li>item1</li> <li class='active'>item2</li> <li>item3</li> <li>item4</li> <li class='active'>item5</li> <li class='active'>item6</li> </ul>
Your selection will find all the elemnts in selection. 您的选择将找到所有选择的元素。 Instead you want to find elements inside other element separately.
相反,你想分别在其他元素中找到元素。 Which I believe is only possible by searching.
我认为只有通过搜索才能实现。 So your code should look like
所以你的代码应该是这样的
$(document).ready(function() {
$('button').click(function(){
var indexes = [];
$( "ul.list").each(function() {
$("li", this).each(function(index) {
if($(this).hasClass('active') {
indexes.push(index);
}
});
});
console.log(indexes);
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.