JQuery幻灯片仅适用于最新的帖子。需要它才能在主页

Question

在这里完成新手。

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

这是我在content.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> 

这是我在header.php中的js代码（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感谢您回复我。这就是主页的样子：

yulius Homepage

测试帖12的文字幻灯片显示效果很好（幻灯片：“1”，“2”，“3”）。 Test Post 10也有一个文本幻灯片（幻灯片：'some text 1'，'some text 2'，'some text 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>

这是测试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的拆分代码块感到抱歉，不太确定如何修复它。

Answer 1

编辑：

$('.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);
});

我的HTML（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>

他们同时“动画”。