使用'.each'方法:如何从[0]开始获取多个有序列表的索引? [英] using '.each' method: how do I get the indexes of multiple ordered lists to each begin at [0]?
问题描述
我有多个div,每个div都有一个有序列表(各种长度)。我正在使用jquery根据其索引为每个列表项添加一个类(用于列化每个列表的部分)。到目前为止我... ...
I've got multiple divs, each with an ordered list (various lengths). I'm using jquery to add a class to each list item according to its index (for the purpose of columnizing portions of each list). What I have so far ...
<script type="text/javascript">
/* Objective: columnize list items from a single ul or ol in a pre-determined number of columns
1. get the index of each list item
2. assign column class according to li's index
*/
$(document).ready(function() {
$('ol li').each(function(index){
// assign class according to li's index ... index = li number -1: 1-6 = 0-5; 7-12 = 6-11, etc.
if ( index <= 5 ) {
$(this).addClass('column-1');
}
if ( index > 5 && index < 12 ) {
$(this).addClass('column-2');
}
if ( index > 11 ) {
$(this).addClass('column-3');
}
// add another class to the first list item in each column
$('ol li').filter(function(index) {
return index != 0 && index % 6 == 0;
}).addClass('reset');
}); // closes li .each func
}); // closes doc.ready.func
</script>
...如果只有一个列表,则成功;当有其他列表时,最后一列类('column-3')将添加到页面上的所有剩余列表项。换句话说,脚本目前正在连续索引所有后续列表/列表项,而不是为每个有序列表重新设置为[0]。
... succeeds if there's only one list; when there are additional lists, the last column class ('column-3') is added to all remaining list items on the page. In other words, the script is presently indexing continuously through all subsequent lists/list items, rather than being re-set to [0] for each ordered list.
可以某人请告诉我正确的方法/语法来纠正/修改这个,以便脚本重新对每个有序列表进行地址/索引?
Can someone please show me the proper method/syntax to correct/amend this, so that the script addresses/indexes each ordered list anew?
非常感谢提前。
shecky
ps标记是非常直接的:
p.s. the markup is pretty straight-up:
<div class="tertiary">
<h1>header</h1>
<ol>
<li><a href="#" title="a link">a link</a></li>
<li><a href="#" title="a link">a link</a></li>
<li><a href="#" title="a link">a link</a></li>
</ol>
</div><!-- END div class="tertiary" -->
推荐答案
这将遍历每个OL,但是一旦在时间:
This will iterate over each OL, but once at a time:
// loop over each <ol>
$('ol').each(function(olIndex){
// loop over each <li> within the given <ol> ("this")
$(this).find('li').each(function(liIndex){
// do your <li> thing here with `liIndex` as your counter
});
});
至于中间的所有东西,你可以用一些更好的选择器来改进它:
As for all that stuff in the middle, you might be able to improve it with some nicer selectors:
$('ol').each(function(){
$(this).find('li')
.filter(':lt(6)').addClass('column-1') // <li> 1-5
.filter(':first').addClass('reset').end().end() // <li> 1
.filter(':gt(5):lt(12)').addClass('column-2') // <li> 6-11
.filter(':first').addClass('reset').end().end() // <li> 6
.filter(':gt(11)').addClass('column-3') // <li> 12+
.filter(':first').addClass('reset'); // <li> 12
});
当然,如果我们在这里制作专栏,也许我们应该动态获取这些数据?
Of course if we're making columns here, maybe we should be getting these counts dynamically?
$('ol').each(function(){
var $lis = $(this).find('li');
var len = $lis.size();
var colLen = Math.ceil(count / 3);
// and so on with the filter stuff with
});
这篇关于使用'.each'方法:如何从[0]开始获取多个有序列表的索引?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!