使用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：https://jsfiddle.net/9020cew0/

以及它应该如何运作；

例如，它应该同时和单独地循环李的

第二，它显示“包括标题1”6次。

第二，它显示“包括标题2”6次。

等等。你说对了!

每次我尝试something...it的时候，我都很困惑.

提前谢谢..。

Answer 1

所以我已经从这个版本中删除了转换，只是为了消除复杂的因素。我不是在捣乱柜台，这不是绝对必要的。如果任何一个div比另一个有更多的元素，它就不会断裂--每个LI被分开处理。它可以作为小提琴使用，或者参见下面的内容：

​

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);
}

    #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;
    }

<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>

​