JQuery 幻灯片仅适用于最近的帖子.需要它来处理主页上的最新帖子 - JQuery Slideshow only works on the most recent post. Need it to work on most recent posts on homepage

在这里完成新手。

我需要以下幻灯片来适用于主页（wordpress）上的所有最新帖子。目前，它仅适用于最新的帖子（最新帖子）。

这是我的内容代码.php：

            <div id="textslider"> 
            <div style="position: absolute; left: 50%;">
                <p style="position: relative; left: -50%; border: none;"> 
                    <?php echo get_field('slide1'); ?> 
                </p>
            </div>
            <div style="position: absolute; left: 50%;">
                <p style="position: relative; left: -50%; border: none;"> 
                    <?php echo get_field('slide2'); ?> 
                </p>
            </div>
            <div style="position: absolute; left: 50%;">
                <p style="position: relative; left: -50%; border: none;"> 
                    <?php echo get_field('slide3'); ?> 
                </p>
            </div>
            </div>

这是我在标头中的js代码.php（Jonathan Snook的代码）：

<script src="http://code.jquery.com/jquery-latest.min.js">
<script>
$('#textslider > div:gt(0)').hide();
    setInterval(function() { 
    $('#textslider > div:first').fadeOut(500)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#textslider');
},  3000);
</script>

PS：我知道Snook在同一页面版本上有多个幻灯片，但我根本无法使其工作。对于上述内容，将文本滑块从 ID 更改为类会使幻灯片根本不循环。请帮忙。

谢谢

更新：@Reddy 谢谢你回复我。这是主页的样子：

尤利乌斯主页

测试帖子 12 的文本幻灯片效果很好（幻灯片："1"、"2"、"3"）。Test Post 10 还有一个文本幻灯片（幻灯片："一些文本 1"、"一些文本 2"、"一些文本 3"），但它不起作用，正如你所看到的，单词堆叠在一起。

这是TEST POST 12（最新帖子）的代码：

     <article id="post-78" class="post-78 post type-post status-publish format-standard hentry category-uncategorized post-grid">
 <style type="text/css">
            .post-78 { background-color: #000000 !important; }
</style>
 <div class="post-cover post-cover-78 stag-image--none"></div>
 <a href="http://myweb.com/test-post-12/" class="post-cover-link"></a>
 <div class="post-content">
    <header class="entry-header">
        <h1 class="entry-title">
            <a href="http://myweb.com/test-post-12/" rel="bookmark">
            <span class="entry-title-primary">test post 12</span> <span     class="entry-subtitle">subtitle bottom</span>                               </a>
            <p class="entry-content">subtitle top</p>
            <div id="textslider"> 
            <div style="position: absolute; left: 50%;">
                <p style="position: relative; left: -50%; border: none;"> 
                    1 
                </p>
            </div>
            <div style="position: absolute; left: 50%;">
                <p style="position: relative; left: -50%; border: none;"> 
                    2 
                </p>
            </div>
            <div style="position: absolute; left: 50%;">
                <p style="position: relative; left: -50%; border: none;"> 
                    3 
                </p>
            </div>
            </div> 
        </h1>
    </header><!-- .entry-header -->
    <footer class="entry-meta">
        <span class="posted-on"><a href="http://myweb.com/test-post-     12/" title="4:06 pm" rel="bookmark"><time class="entry-date published" datetime="2016-03-02T16:06:39+00:00">March 2, 2016</time><time class="updated" datetime="2016-03-03T16:00:26+00:00">March 3, 2016</time></a></span><span class="reading-time">1 minute read</span><span class="byline">by <span class="author vcard"><a class="url fn n" href="http://myweb.com/author/yulius/">yulius</a></span></span>                           </footer><!-- .entry-meta -->

        </div>
    </article>

这是 Test Post 11 的代码：

     <article id="post-65" class="post-65 post type-post status-publish format-standard hentry category-uncategorized post-grid">
<style type="text/css">
            .post-65 { background-color: #000000 !important; }
</style>

<a href="http://myweb.com/test-post-11/" class="post-cover-link"></a>
<div class="post-content">
    <header class="entry-header">
        <h1 class="entry-title">
            <a href="http://myweb.com/test-post-11/" rel="bookmark">
            <span class="entry-title-primary">test post 11</span> <span class="entry-subtitle">"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</span>                               </a>
            <p class="entry-content">yoohoo</p>
            <div id="textslider"> 
            <div style="position: absolute; left: 50%;">
                <p style="position: relative; left: -50%; border: none;"> 
                </p>
            </div>
            <div style="position: absolute; left: 50%;">
                <p style="position: relative; left: -50%; border: none;"> 
                </p>
            </div>
            <div style="position: absolute; left: 50%;">
                <p style="position: relative; left: -50%; border: none;"> 
                </p>
            </div>
            </div> 
        </h1>
    </header><!-- .entry-header -->
    <footer class="entry-meta">
        <span class="posted-on"><a href="http://myweb.com/test-post-11/" title="3:12 pm" rel="bookmark"><time class="entry-date published" datetime="2016-03-01T15:12:55+00:00">March 1, 2016</time><time class="updated" datetime="2016-03-02T15:41:23+00:00">March 2, 2016</time></a></span><span class="reading-time">1 minute read</span><span class="byline">by <span class="author vcard"><a class="url fn n" href="http://myweb.com/author/yulius/">yulius</a></span></span>                 </footer><!-- .entry-meta -->

        </div>
    </article>

这是Test POST 10的代码（这个也有幻灯片，但如您所见，文本堆叠在一起，幻灯片根本不起作用）：

     <article id="post-63" class="post-63 post type-post status-publish format-standard hentry category-uncategorized post-grid">
<style type="text/css">
            .post-63 { background-color: #000000 !important; }
</style>

<a href="http://myweb.com/test-post-10/" class="post-cover-link"></a>
<div class="post-content">
    <header class="entry-header">
        <h1 class="entry-title">
            <a href="http:/myweb.com/test-post-10/" rel="bookmark">
            <span class="entry-title-primary">test post 10</span> <span class="entry-subtitle">am super cool</span>                             </a>
            <p class="entry-content">i am cool</p>
            <div id="textslider"> 
            <div style="position: absolute; left: 50%;">
                <p style="position: relative; left: -50%; border: none;"> 
                    &quot;the coolest of all cakes!!!&quot; 
                </p>
            </div>
            <div style="position: absolute; left: 50%;">
                <p style="position: relative; left: -50%; border: none;"> 
                    &quot;super good&quot; 
                </p>
            </div>
            <div style="position: absolute; left: 50%;">
                <p style="position: relative; left: -50%; border: none;"> 
                    &quot;unbelievable&quot; 
                </p>
            </div>
            </div> 
        </h1>
    </header><!-- .entry-header -->
    <footer class="entry-meta">
        <span class="posted-on"><a href="http://myweb.com/test-post-10/" title="3:12 pm" rel="bookmark"><time class="entry-date published" datetime="2016-03-01T15:12:19+00:00">March 1, 2016</time><time class="updated" datetime="2016-03-03T18:02:40+00:00">March 3, 2016</time></a></span><span class="reading-time">1 minute read</span><span class="byline">by <span class="author vcard"><a class="url fn n" href="http://myweb.com/author/yulius/">yulius</a></span></span>                 </footer><!-- .entry-meta -->

        </div>
    </article>

这是测试后 9 的代码：

     <article id="post-60" class="post-60 post type-post status-publish format-standard hentry category-uncategorized post-grid">
<style type="text/css">
            .post-60 { background-color: #000000 !important; }
</style>

<a href="http://myweb.com/test-post-9/" class="post-cover-link"></a>
<div class="post-content">
    <header class="entry-header">
        <h1 class="entry-title">
            <a href="http://myweb.com/test-post-9/" rel="bookmark">
            <span class="entry-title-primary">test post 9</span> <span class="entry-subtitle">oblique is Cool</span>                                </a>
            <p class="entry-content"></p>
            <div id="textslider"> 
            <div style="position: absolute; left: 50%;">
                <p style="position: relative; left: -50%; border: none;"> 
                </p>
            </div>
            <div style="position: absolute; left: 50%;">
                <p style="position: relative; left: -50%; border: none;"> 
                </p>
            </div>
            <div style="position: absolute; left: 50%;">
                <p style="position: relative; left: -50%; border: none;"> 
                </p>
            </div>
            </div> 
        </h1>
    </header><!-- .entry-header -->
    <footer class="entry-meta">
        <span class="posted-on"><a href="http://myweb.com/test-post-9/" title="3:11 pm" rel="bookmark"><time class="entry-date published" datetime="2016-03-01T15:11:49+00:00">March 1, 2016</time><time class="updated" datetime="2016-03-02T14:42:36+00:00">March 2, 2016</time></a></span><span class="reading-time">1 minute read</span><span class="byline">by <span class="author vcard"><a class="url fn n" href="http://myweb.com/author/yulius/">yulius</a></span></span>                  </footer><!-- .entry-meta -->

        </div>
    </article>

再次感谢。很抱歉帖子 11、10 和 9 的拆分代码块，不太确定如何解决这个问题。

编辑：

$('.textslider').each(function(){
    $(this).children('div:gt(0)').hide();
}); 
$('.textslider').each(function(){
    var parentDiv = $(this);
    //alert(parentDiv);
    setInterval(function() {    
        parentDiv.children('div:first').fadeOut(500)
            .next()
            .fadeIn(1000)
            .end()
            .appendTo(parentDiv);
    },  3000, parentDiv);
});

我不确定这是你要找的，但是...希望它能帮助您解决问题：

$('#textslider > div').each(function(){
    $(this).children('p:gt(0)').hide();
}); 
$('#textslider > div').each(function(){
    var parentDiv = $(this);
    //alert(parentDiv);
    setInterval(function() {    
        parentDiv.children('p:first').fadeOut(500)
            .next()
            .fadeIn(1000)
            .end()
            .appendTo(parentDiv);
    },  3000, parentDiv);
});

我的网页（divs...

      <div id="textslider">
            <div>
                <p>text1</p>
                <p>text2</p>
                <p>text3</p>
                <p>text4</p>
                <p>text5</p>
            </div>
            <div>
                <p>texta</p>
                <p>textb</p>
                <p>textc</p>
                <p>textd</p>
                <p>texte</p>
            </div>
            <div>
                <p>t1</p>
                <p>t2</p>
                <p>t3</p>
                <p>t4</p>
                <p>t5</p>
            </div>
        </div>

它们都同时"动画化"。