创建一个带有javascript和jquery的侧边栏，可以同时循环div

Question

首先，我是编程新手，英语是我的第二个语言，所以要宽容一点！现在，我正在尝试用html / javascript / jquery创建一个侧栏，并没有太大成功.. 这些例子非常自我解释。 这就是我想出来的;
HTML代码;

<div id="sidebar">
    <ul id="side-rcnt-thumb-post-list">

        <li>
            <div id="content-1">include title 1</div>
            <div id="content-2">include title 2</div>
            <div id="content-3">include title 3</div>
            <div id="content-4">include title 4</div>
            <div id="content-5">include title 5</div>
            <div id="content-6">include title 6</div>
            <div id="content-7">include title 7</div>
        </li>
        <li>
            <div id="content-1">include title 1</div>
            <div id="content-2">include title 2</div>
            <div id="content-3">include title 3</div>
            <div id="content-4">include title 4</div>
            <div id="content-5">include title 5</div>
            <div id="content-6">include title 6</div>
            <div id="content-7">include title 7</div>
        </li>
        <li>
            <div id="content-1">include title 1</div>
            <div id="content-2">include title 2</div>
            <div id="content-3">include title 3</div>
            <div id="content-4">include title 4</div>
            <div id="content-5">include title 5</div>
            <div id="content-6">include title 6</div>
            <div id="content-7">include title 7</div>
        </li>
        <li>
            <div id="content-1">include title 1</div>
            <div id="content-2">include title 2</div>
            <div id="content-3">include title 3</div>
            <div id="content-4">include title 4</div>
            <div id="content-5">include title 5</div>
            <div id="content-6">include title 6</div>
            <div id="content-7">include title 7</div>
        </li>
        <li>
            <div id="content-1">include title 1</div>
            <div id="content-2">include title 2</div>
            <div id="content-3">include title 3</div>
            <div id="content-4">include title 4</div>
            <div id="content-5">include title 5</div>
            <div id="content-6">include title 6</div>
            <div id="content-7">include title 7</div>
        </li>
        <li>
            <div id="content-1">include title 1</div>
            <div id="content-2">include title 2</div>
            <div id="content-3">include title 3</div>
            <div id="content-4">include title 4</div>
            <div id="content-5">include title 5</div>
            <div id="content-6">include title 6</div>
            <div id="content-7">include title 7</div>
        </li>
    </ul>




</div>

我的基本javascript + jquery代码;

    var divs = $('div[id^="content-"]').hide(),
    i = 0;

(function cycle() {

    divs.eq(i).fadeIn(400)
        .delay(1000)
        .fadeOut(400, cycle);

    i = ++i % divs.length;

})();

[这是它现在如何运作的一个例子;] [1]

[1]：https://jsfiddle.net/9020cew0/

它应该如何运作;
它应该同时和单独循环li，例如
第二个1;它显示“包括标题1”6次
第二个2;它显示“包括标题2”6次
等...你明白了！

每当我尝试一些东西......它就会变得凌乱，我很困惑......提前谢谢......

Answer 1

所以我已经删除了此版本的转换，只是为了删除复杂因素。我没有弄乱柜台，这绝对没有必要。如果任何div有比另一个更多的元素，它将不会中断 - 每个LI被单独处理。它可以fiddle使用，或者参见下文：

＆＃13;

＆＃13;

var divs = $('div[id^="content-"]').hide();

cycle();

function cycle() {
  $("li").children(":visible").hide().next().show();
  if ($("li").children(":visible").length == 0) {
    $("li").children(":first-child").show();
  }
  setTimeout(cycle, 500);
}

＆＃13;

    #sidebar{
        width: 250px;
        margin-left:50%;
    }



    /*
    Style Sidebar Recent Blog Posts with 75x75px Thumbnails
    */
    ul#side-rcnt-thumb-post-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    #side-rcnt-thumb-post-list li {
        margin-top: 15px;
        overflow: hidden;
        border-top: 1px solid #CCC;
        padding-top: 15px;
        position: relative;
        min-height: 76px;
    }


    .srtpl-l {
        float: left;
        margin-right: 15px;
    }

    .srtpl-a {
        display: block;
        outline: 0!important;
        font-weight: 400;
    }

    #side-rcnt-thumb-post-list img {
        max-width: 100%;
        width: auto\9;
        height: auto;
        vertical-align: middle;
        border: 0;
        -ms-interpolation-mode: bicubic;
    }

    .srtpl-r {
        margin-left: 90px;
    }


    .srtpl-n {
        display: block;
        color: #343534;
        line-height: 1.2;
        font-weight: 600;
        font-size: 13px;
        outline: 0!important;
        text-decoration: none;
        font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<body>
<div id="sidebar">
    <ul id="side-rcnt-thumb-post-list">

        <li>
            <div id="content-1">include title 1</div>
            <div id="content-2">include title 2</div>
            <div id="content-3">include title 3</div>
            <div id="content-4">include title 4</div>
            <div id="content-5">include title 5</div>
            <div id="content-6">include title 6</div>
            <div id="content-7">include title 7</div>
        </li>
        <li>
             <div id="content-11">include title 1</div>
            <div id="content-22">include title 2</div>
            <div id="content-33">include title 3</div>
            <div id="content-44">include title 4</div>
            <div id="content-55">include title 5</div>
            <div id="content-66">include title 6</div>
            <div id="content-77">include title 7</div>
        </li>
        <li>
            <div id="content-1">include title 1</div>
            <div id="content-2">include title 2</div>
            <div id="content-3">include title 3</div>
            <div id="content-4">include title 4</div>
            <div id="content-5">include title 5</div>
            <div id="content-6">include title 6</div>
            <div id="content-7">include title 7</div>
        </li>
        <li>
            <div id="content-1">include title 1</div>
            <div id="content-2">include title 2</div>
            <div id="content-3">include title 3</div>
            <div id="content-4">include title 4</div>
            <div id="content-5">include title 5</div>
            <div id="content-6">include title 6</div>
            <div id="content-7">include title 7</div>
        </li>
        <li>
            <div id="content-1">include title 1</div>
            <div id="content-2">include title 2</div>
            <div id="content-3">include title 3</div>
            <div id="content-4">include title 4</div>
            <div id="content-5">include title 5</div>
            <div id="content-6">include title 6</div>
            <div id="content-7">include title 7</div>
        </li>
        <li>
            <div id="content-1">include title 1</div>
            <div id="content-2">include title 2</div>
            <div id="content-3">include title 3</div>
            <div id="content-4">include title 4</div>
            <div id="content-5">include title 5</div>
            <div id="content-6">include title 6</div>
            <div id="content-7">include title 7</div>
        </li>
    </ul>




</div>

＆＃13;

＆＃13;

＆＃13;