Jquery 如何在具有特定类的最后一个列表元素之后追加html？

我的页面上有三个无序的列表。每个无序列表项都有一个“foo”类：

html

<ul>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <li>item</li>
    <li>item</li>
</ul>

<ul>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <li>item</li>
    <li>item</li>
</ul>

<ul>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <li>item</li>
    <li>item</li>
</ul>

<ul>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <hr>
    <li>item</li>
    <li>item</li>
</ul>

<ul>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <hr>
    <li>item</li>
    <li>item</li>
</ul>

<ul>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <hr>
    <li>item</li>
    <li>item</li>
</ul>

<ul>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <hr>
    <li>item</li>
    <li>item</li>
</ul>

<ul>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <li class="foo">item</li>
</ul>

这就是我努力实现的目标：

html

<ul>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <li>item</li>
    <li>item</li>
</ul>

<ul>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <li>item</li>
    <li>item</li>
</ul>

<ul>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <li>item</li>
    <li>item</li>
</ul>

<ul>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <hr>
    <li>item</li>
    <li>item</li>
</ul>

<ul>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <hr>
    <li>item</li>
    <li>item</li>
</ul>

<ul>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <hr>
    <li>item</li>
    <li>item</li>
</ul>

<ul>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <hr>
    <li>item</li>
    <li>item</li>
</ul>

<ul>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <li class="foo">item</li>
</ul>

项目
项目
项目

项目
项目


项目
项目
项目

项目
项目


项目
项目
项目

项目
项目

感谢@Azim的建议。对于可能遇到此线程的任何人，如果要向所有元素插入标记（或执行任何操作），请更进一步，除非它是最后一个可以执行此操作的元素：

jquery

$('li.foo:last-child').after('<hr>');

$('ul').each(function(){
    $('<hr>').insertAfter('li.foo');
});

$('ul').each(function () {
    $(this).find('li.foo').not(':last-child').after('<hr>');
});

$（'ul'）。每个（函数（）{
$（this.find（'li.foo'）。而不是（':last child'）。在（'
'）之后；
});

这将产生如下结果：

html

<ul>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <li>item</li>
    <li>item</li>
</ul>

<ul>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <li>item</li>
    <li>item</li>
</ul>

<ul>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <li>item</li>
    <li>item</li>
</ul>

<ul>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <hr>
    <li>item</li>
    <li>item</li>
</ul>

<ul>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <hr>
    <li>item</li>
    <li>item</li>
</ul>

<ul>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <hr>
    <li>item</li>
    <li>item</li>
</ul>

<ul>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <hr>
    <li>item</li>
    <li>item</li>
</ul>

<ul>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <li class="foo">item</li>
    <li class="foo">item</li>
</ul>

项目
项目
项目

项目
项目


项目
项目
项目
项目
项目

遍历每个

ul

，找到最后一个

li

具有类

foo

，然后添加

，如下所示

$('ul').each(function(){
    $(this).find('li.foo:last').after('<hr>');
});

$（'ul'）。每个（函数（）{
$（this.find（'li.foo:last'）。在（“
”）之后；
});

---

这将为您提供

li.foo:last

元素作为返回值，这将有助于进一步链接函数。

以下内容将为每个

ul

调用函数，然后在其下方的最后一个foo之后插入

：

$("ul").each(function () {
    $('<hr>').insertAfter($(this).find(".foo").last());
});

$（“ul”）。每个（函数）{
$（“
”）.insertAfter（$（this.find（“.foo”）.last（））；
});