jquery - 在列表中使用 insertAfter 创建多个结果时出现问题

Question

我正在尝试使用 insertAfter 为具有多个列表项的列表中的每个元素添加 HTML。

如果你看看我的Fiddle您会看到我在每个列表项中得到多个结果，但我无法理解为什么，因为在我的代码中我的目标是列表项中的“每个”，所以在我的示例中，我应该在每个列表项中得到一个“阅读更多” ，任何帮助将不胜感激。

HTML

<div class="container">

<ul>
    <li class="eaList">
        <p class="title">
            Title
        </p>
        <p class="date">
            20/20/20
        </p>

    </li>
    <li class="eaList">
        <p class="title">
            Title
        </p>
        <p class="date">
            20/20/20
        </p>

    </li>
    <li class="eaList">
        <p class="title">
            Title
        </p>
        <p class="date">
            20/20/20
        </p>

    </li>
</ul>

</div>

JQUERY

$(".eaList").each(function() {
    $('<p>Read More</p>').insertAfter('.date');
});

Answer 1

.date 匹配所有 class="date" 元素，而不仅仅是当前 .each() 迭代中的元素。您可以使用 $(this).find('.date') 来匹配该值。

$(".eaList").each(function() {
    $('<p>Read More</p>').insertAfter($(this).find('.date'));
});

但是不需要循环，你可以这样做:

$(".eaList .date").after('<p>Read More</p>');

DOM 修改函数会自动迭代所有选定的元素。