Как добавить элемент после нового HTML-тега Jquery автоматически?

Question

Примечание: Я хотел использовать JQuery, но это было решено с помощью цикла wordpress и php.

Я работаю с WordPress и создал новую часть для отображения последних новостей для моих пользователей. Между тегами li существуют новости, но проблема в том, что при добавлении нового тега li я хочу добавить тег span после последнего li, но я не знаю, как это сделать.

Я знаю, что это возможно с jQuery. Обратите внимание, что теги li будут добавлены автоматически (с помощью цикла WordPress для сообщений), а не вручную, поэтому мне нужен цикл и, если в Jquery, для подсчета тегов li вначале затем, когда был добавлен новый тег li, автоматически добавьте теги span к этому новому тегу li.

Мой код:

<ul id="list">
    <li id="one">title one</li>
    <li id="two">title two</li>
    <li id="three">title three</li>
</ul>

Мне нужно добавить тег span следующим образом:

<li id="four">title four<span>new</span></li> 

ОБНОВЛЕНИЕ 1:

цикл получения заголовка сообщения из wordpress:

<ul>
    <?php if(have_posts()) : ?> <?php while(have_posts()) : the_post(); ?>

    <li><?php the_title(); ?></li>

    <?php endwhile; ?><?php endif; ?>
</ul>

Answer 1

Вы можете использовать это, получая дату публикации

<?php if(have_posts()) : ?> <?php while(have_posts()) : the_post(); ?>

        <?php
        $datetime = strtotime( get_the_date() );
            $yesterday = strtotime("-1 days");
            if ( $datetime >= $yesterday ) {
            $new = '<span>New</span>';
            } else {
                $new = '';
            }
        ?>
    <li><?php the_title(); ?> <?php echo $new ?> </li>

    <?php endwhile; ?><?php endif; ?>

Answer 2

Вы можете достичь этого напрямую через WordPress

<ul>

<?php if(have_posts()) : ?> <?php 

global $wp_query;
$totalPosts = $wp_query->post_count; //count the total posts
$count = 1;
while(have_posts()) : the_post(); 
if($count < $totalPosts){ ?>
    <li><?php the_title(); ?></li>
<?php }
else{ ?>
    <li><span><?php the_title(); ?></span></li>
<?php 
}
$count++;
endwhile; endif; ?>

Answer 3

Возможно, стоит добавить span в тег li.Используйте селектор CSS: last-child, чтобы получить указатель на последний элемент в списке, а затем добавьте нужный HTML-код. Вот пример использования jQuery по вашему запросу.

var newHtml = '<span style="color:red;">new</span>';
$('#list li:last-child').append(newHtml);