jQuery循环 - 从下一个元素继续

时间:2014-07-20 06:16:25

标签: jquery

该函数用于删除元素并继续循环。我正在使用div:FIRST或LAST在删除元素后继续。如何从下一个元素继续。 例如,在删除注释3之后,我可以使它成为从Notes 1重新开始的循环。但实际上我希望它从Notes 4继续。 感谢

http://jsfiddle.net/D3L45/1/

Style
#NotesBlock {
position: absolute;
width: 600px;
margin: 0px auto;
}
.divNotes {
display: none;
padding: 12px;
width: 100%;
text-align: center;
position: absolute;
}

<a href="#" class="CloseNotes">Not Interesting</a>
<div id="NotesBlock">
<div class="divNotes">
    <div class=" NotesTopic">
        <h4>Topic 1</h4>
        <p>1st Topic description</p>
    </div>
</div>
<div class="divNotes">
    <div class=" NotesTopic">
        <h4>Topic 2</h4>
        <p>2nd Topic description</p>
    </div>
</div>
<div class="divNotes">
    <div class=" NotesTopic">
        <h4>Topic 3</h4>
        <p>3rd Topic description</p>
    </div>
</div>
<div class="divNotes">
    <div class=" NotesTopic">
        <h4>Topic 4</h4>
        <p>4th Topic description</p>
    </div>
</div>
<div class="divNotes">
    <div class=" NotesTopic">
        <h4>Topic 5</h4>
        <p>5th Topic description</p>
    </div>
</div>

脚本

var notesElement = null;
function notesLoop(elem) {
notesElement = elem;
elem.fadeIn()
    .delay(1500)
    .fadeOut(function () {
        notesLoop(elem.next());
        if(elem.next().length === 0) {
            notesLoop($(".divNotes:first"));
        }
    });
}

$(document).ready(function () {
    notesLoop($(".divNotes:first"));
    $(".CloseNotes").click(function (e) {
        e.preventDefault();
        if (notesElement)
            $(notesElement).remove();
            notesLoop($(".divNotes:first"));     
    });
});

更新

我没有使用过PUSH()或PUSHSTACK()。我正在尝试使用它们更新此代码。可能吗?我是否必须为此发布另一个问题?感谢

我的更新代码:

http://jsfiddle.net/5dbJc/1/

2 个答案:

答案 0 :(得分:1)

您可以获取要删除的元素的索引,然后根据该索引发送选择器。

http://jsfiddle.net/D3L45/4/

$(document).ready(function () {
  notesLoop($(".divNotes:first"));
  $(".CloseNotes").click(function (e) {
    e.preventDefault();
    var divIndex = notesElement.index();      
    if(divIndex == $('.divNotes').length -1){
      divIndex = 0;
    }
    if (notesElement)
        $(notesElement).remove();        
        notesLoop($(".divNotes:eq("+divIndex+")"));     
  });
});

答案 1 :(得分:0)

在click侦听器中,您告诉jQuery从notesLoop()开始调用$(".divNotes:first")函数。如果要从其他元素开始,请更改它。例如,替换:

if (notesElement)
$(notesElement).remove();
notesLoop($(".divNotes:first"));

通过

if(notesElement){
 var $next=notesElement.next();
  if($next.length==0){
   $next=$(".divNotes:first");
  }
 notesElement.remove();
 notesLoop($next);
}

实例:http://jsfiddle.net/D3L45/2/