Javascript Loop only return the last value when using .empty function

Question

I want to append the data only into a specific ID myID. It only prints the last value of the loop which is 3.

 setInterval(sample, 2000);
 function sample()
 {
   for(var i=0;i<=3;i++)
     {
         $('.found .find').each(function() {
             if(this.id == "myID")
              {
                // if the ID of this element is equal to #myID
                // this is the place where the data will append
                $(this).empty();
                $(this).append(i);
              }
         });
     }

 }

HTML:

<div class="found">
      <div class="find" id="myID"></div>
</div>

 <div class="found">
      <div class="find" id="anID"></div>
</div>

<div class="found">
      <div class="find" id="anID2"></div>
</div>

"It works for me but it ONly prints THe last value of the loop which is 3" Try not calling .empty() , which would remove previously appended i — guest271314
– guest271314, Commented May 13, 2015 at 18:03
@guest271314 If i get rid of .empty() it will not stop in appending data. Infinity — Kean Allen
– Kean Allen, Commented May 13, 2015 at 18:05
Is requirement to append 0, wait two seconds, append 1, up to 3, then start again ? Or, append 0123, 0123 infinitely ? — guest271314
– guest271314, Commented May 13, 2015 at 18:09
This is a very backward way to achieve what you are looking for. After reading the comments, I'm unsure as to why you are asking for "numbers instead of strings", why you cant just append the value "0123" to your div directly $('#myDiv').val("0123");, why you are confused about the fact that .empty() is causing only the last value 3 to appear, why you need to loop through all of the .found .find divs when theres a unique id.. maybe some clarification is in order? — wahwahwah
– wahwahwah, Commented May 13, 2015 at 18:26
"because it is an array. An array from php." Why not mentioned at actual text of Question ? See stackoverflow.com/help/how-to-ask — guest271314
– guest271314, Commented May 13, 2015 at 18:35

ssube · Accepted Answer · 2015-05-13 17:45:23Z

3

empty removes all children from the given element, so you probably want to use it before the loop:

$('.found').empty();
for (var i=0; i <= 3; i++) {
  $('.found').append(i);
}

This will empty out the container, then append your list of elements (or numbers).

This can be used in an MVC framework's render method to empty the container of the previous render before adding new content.

answered May 13, 2015 at 17:45

ssube

48.4k10 gold badges107 silver badges144 bronze badges

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

3 Comments

Kean Allen Over a year ago

Thank you man. But what if I have many .found class and Inside of each class has another div element with different ID? And I want the data to append only in the specific ID? PLease help me.

ssube Over a year ago

@KeanAllen I'm not quite sure what you mean. What DOM structure do you want to end up with? Some before and after examples would be super helpful.

Kean Allen Over a year ago

@ssube PLease see improve question above. Thanks. Ill wait for reply

guest271314 · Accepted Answer · 2015-05-13 18:15:11Z

0

Try

$(function() {    
        setInterval(loop, 1000);
        function loop() {
          var n = "0123";
          for(var i=0;i<=3;i++) {
            $(".found").find(".find[id*=ID]").html(n);
          }    
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="found">
      <div class="find" id="myID"></div>
</div>

 <div class="found">
      <div class="find" id="anID"></div>
</div>

<div class="found">
      <div class="find" id="anID2"></div>
</div>

edited May 13, 2015 at 18:15

answered May 13, 2015 at 17:51

guest271314

1

3 Comments

Kean Allen Over a year ago

aS I said. removing .empty(); function will make the code append infinitely. Which is not what I want.

Kean Allen Over a year ago

can u please change the .html(n) ti i? so that it prints the numbers? please. I will try to run it

guest271314 Over a year ago

@KeanAllen Tried stacksnippets ? "0123" is appended to .find . No "numbers" are printed ; "0123" is String within html

Ritesh Karwa · Accepted Answer · 2015-05-13 18:20:13Z

0

Modified the code as You want it to happen just once Run the original code if you want to keep doing it

    <html>
    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <style>

      </style>
    </head>
    <body>
    <div class="found">
      Hello World
    </div>
    <div class="found">
          <div class="find" id="myID"></div>
    </div>

     <div class="found">
          <div class="find" id="anID">Append here</div>
    </div>

    <div class="found">
          <div class="find" id="anID2"></div>
    </div>
    <script>
    $(document).ready(function(){


    //$('#anID').empty();
for(var i=0;i<=3;i++)
{
    $('<p>'+i+'</p>').appendTo('#anID');

    //$('.found').append(i);
    //$('.found').append("\n"); 

}


});
    </script>

    </body>
    </html>

edited May 13, 2015 at 18:20

answered May 13, 2015 at 18:00

Ritesh Karwa

2,2641 gold badge15 silver badges17 bronze badges

5 Comments

Kean Allen Over a year ago

see Improved question above

Ritesh Karwa Over a year ago

@KeanAllen changed as per your requirement

Kean Allen Over a year ago

what changed as per requirement?

Ritesh Karwa Over a year ago

Nothing changed, you can create as many div tags. Jquery will find appropriate div based on id and start append 0123 to it

Kean Allen Over a year ago

Thanks. I already had an answer I just improved your code. Thanks BTW. SEE my answer above

Kean Allen · Accepted Answer · 2015-05-13 18:28:23Z

0

  $(function() {    
    setInterval(loop, 1000);
    function loop() {

        $(".found").find(".find[id*=ID]").empty();
      for(var i=0;i<=3;i++)
      {
        $(".found").find(".find[id*=ID]").prepend(i);
      }    
    }
});

answered May 13, 2015 at 18:28

Kean Allen

231 silver badge10 bronze badges

3 Comments

guest271314 Over a year ago

Calling .empty() is not necessary. .html() will replace html within .find(".find[id*=ID]") . See stackoverflow.com/a/30222010 . Also , at OP, requirement appeared to be "0123" , not "3210" ?

Kean Allen Over a year ago

If .html it Only prints the last value, while .empty() it all prints the value :)

guest271314 Over a year ago

Also , at OP, requirement appeared to be "0123" , not "3210" "0123 only" stackoverflow.com/questions/30221839/… ?

Collectives™ on Stack Overflow

Javascript Loop only return the last value when using .empty function

4 Answers 4

3 Comments

3 Comments

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

3 Comments

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related