使用jQuery,我试图将类似的项目分组到一个列表中.这就是我想要做的.给出如下列表:
<ul>
<li class="foo">Item #1</li>
<li class="foo">Item #2</li>
<li class="foo">Item #3</li>
<li class="bar">Item #4</li>
<li class="bar">Item #5</li>
<li class="foo">Item #6</li>
<li class="foo">Item #7</li>
<li class="bar">Item #8</li>
</ul>
我想得出以下结论:
<ul>
<li class="foo">Item #1 <a>2 More Like This</a>
<ul>
<li class="foo">Item #2</li>
<li class="foo">Item #3</li>
</ul>
</li>
<li class="bar">Item #4</li>
<li class="bar">Item #5</li>
<li class="foo">Item #6 <a>1 More Like This</a>
<ul>
<li class="foo">Item #7</li>
</ul>
</li>
<li class="bar">Item #8</li>
</ul>
简而言之,只要有2个或更多带有class =“ foo”的项目,就应该将它们组合在一起,直到达到非class =“ foo”的项目为止.然后,我可以使用链接来显示或隐藏分组的项目.
解决方法:
这是一种可能性:
$('ul > li.foo')
.filter(function() {
var $th = $(this);
return $th.next('li.foo').length && !$th.prev('li.foo').length;
})
.each(function() {
var $th = $(this);
var len= $th.append('<a href="#"> more like this</a>')
.nextUntil(':not(li.foo)').wrapAll('<ul>').length;
$th.next('ul').appendTo(this);
$th.children('a').prepend(len);
});
说明:.filter()发生的事情是,它会将li.foo元素的范围缩小到组中的第一个元素(在它之后至少有一个li.foo,之前没有一个).
然后使用.each()附加< a> ;,获取下一个元素,直到到达不是li.foo的元素,并用< ul>包装这些元素.并返回使用length属性的数量.
然后我们遍历到新的< ul>并将其附加到组中的第一个li.foo中.
最后,我们将存储在length属性中的数量放在< a>中.元件.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。