CODEWITHSUNDEEP
jquery
Sosh
Sosh

Reputation: 113

jQuery loop - continue from next element

The function is to remove an element and continue the loop. I'm using div:FIRST or LAST to continue after an element is removed. How to continue from the next element. For example, after removing notes 3, I can make it the loop to start again from Notes 1. But I actually want it to continue from Notes 4. Thanks

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>

Script

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

UPDATE:

I haven't used the PUSH() or PUSHSTACK(). I'm trying to update this code using them. Is it possible? Do I have to post another question for this? Thanks

My updated code:

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

Upvotes: 1

Views: 165

Answers (2)

carter
carter

Reputation: 5432

You can get the index of the element you are removing and then send the selector based on that index.

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

Upvotes: 1

user3786597
user3786597

Reputation: 380

In the click listener, you tell jQuery to call the notesLoop() function starting from $(".divNotes:first"). Change it if you want to start from another element. For example, replace :

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

by

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

Live example : http://jsfiddle.net/D3L45/2/

Upvotes: 0

Related Questions