我有一个无序列表,其中包含未知数量的列表项,未知顺序. 我需要找到一个包含.colspan类的列表项,看看它后面的项是否也有该类,然后根据跟随它的数量添加一个类. 如果只有1本身,那就给
我需要找到一个包含.colspan类的列表项,看看它后面的项是否也有该类,然后根据跟随它的数量添加一个类.
如果只有1本身,那就给那个李另一个等级1-col.
如果连续两个,2-col.
如果连续三个,3-col.
我一次不需要超过3个.
例如….
之前:
<ul> <li class="colspan">content</li> <li class="other">content</li> <li class="colspan">content</li> <li class="colspan">content</li> <li class="other">content</li> <li class="colspan">content</li> <li class="colspan">content</li> <li class="colspan">content</li> <li class="other">content</li> </ul>
后:
<ul> <li class="colspan 1-col">content</li> <li class="other">content</li> <li class="colspan 2-col">content</li> <li class="colspan 2-col">content</li> <li class="other">content</li> <li class="colspan 3-col">content</li> <li class="colspan 3-col">content</li> <li class="colspan 3-col">content</li> <li class="other">content</li> </ul>
我假设我以某种方式使用.next()?然后,当然,.addClass().那部分我很擅长.这是试图弄清楚如何应用1-col,2-col,3-col,这是一个挑战.
任何帮助将不胜感激!
一种可能性是具有递归函数,该函数使用colspan类计算下一个元素的数量.迭代所有colspans,检查.prev元素是否是colspan.如果是,则将类名设置为前一个元素的-col类,否则使用当前colspan调用递归函数(这将是任何colspans系列中的第一个):const getCount = (elm) => { const next = elm.next(); return next.hasClass('colspan') ? 1 + getCount(next) : 0 }; $('.colspan').each(function() { const $this = $(this); const $prev = $this.prev(); $this.addClass( $prev.hasClass('colspan') ? $prev.attr('class').split(' ')[1] : 'col-' + (1 + getCount($this)) ) }); console.log($('ul').html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="colspan">content</li> <li class="other">content</li> <li class="colspan">content</li> <li class="colspan">content</li> <li class="other">content</li> <li class="colspan">content</li> <li class="colspan">content</li> <li class="colspan">content</li> <li class="other">content</li> </ul>