Проблема с использованием 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'));
});

Но для l oop нет необходимости, вы можете сделать:

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

Функции модификации DOM автоматически повторяются по всем выделенным элементам.

Answer 2

я верю, что это то, что вы хотите

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>