jQuery loop - continue from next element

Question

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/

Please post another question if you want to discuss the pushstack :) — carter
– carter, Commented Jul 21, 2014 at 19:49

carter · Accepted Answer · 2014-07-20 18:23:04Z

1

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

edited Jul 20, 2014 at 18:23

answered Jul 20, 2014 at 6:47

carter

5,5145 gold badges34 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

carter Over a year ago

Also remember that index() will only get the index relative to siblings. :)

Sosh Over a year ago

Thank you @carter. I wasn't thinking about index because I was wondering that the indexes change for the elements after the removed elements. Your updated code is working fine but when I close the last div, the loop stops. I was trying to push it to div:FIRST when the last element is closed but couldn't. :(

carter Over a year ago

I added a sanity check to go back to zero if you are about to remove the last element.

user3786597 · Accepted Answer · 2014-07-20 06:40:38Z

0

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/

answered Jul 20, 2014 at 6:40

user3786597

3802 silver badges6 bronze badges

4 Comments

Sosh Over a year ago

Done. Thanks @user3786597. I wasn't aware of $next. :)

user3786597 Over a year ago

$next is just a notation to remember that the variable is a jQuery object, you can name it as you want.

user3786597 Over a year ago

What do you want to do ? Why using push() or pushstack() ? Push HTML fragments to a JS array does not add them to the page. You need to explicitly add them to the content of the page. See tour example improved at jsfiddle.net/5dbJc/3

Sosh Over a year ago

Got it, @user3786597. Actually, I wanted to dynamically render the notes when the user has entered the value. So thought this would be better rather than having individual div blocks for each note. Thank you for the guidance.

Collectives™ on Stack Overflow

jQuery loop - continue from next element

2 Answers 2

3 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related