Question

I have a webpage that dynamically prepends new divs about once per minute.

Here is what the HTML code basically looks like:

<div id="container"></div>

<div id="freshcontent">
 <div id="501">Stuff 2:18pm</div>
 <div id="500">Stuff 2:12pm</div>
 <div id="499">Stuff 2:09pm</div>
 <div id="498">Stuff 2:05pm</div>
</div>

I want to retrieve the id of the most recent div that is inside the “freshcontent” div, which would be “501” in the example above.

Then I want to take the id number and insert it into some Jquery code, which I have here:

<script type="text/javascript">
 $(document).ready(function() {
  $.ajaxSetup({ cache: false });
   setInterval(function() {
   $("#container").load("/webpage/?id="+THE_ID_NUMBER_GOES_HERE);
  }, 10000);
 });
</script>

So I have 2 questions:

1. How do I get the id of the most recent div (which is constantly changing)?
2. How do I insert it into my Jquery code?

I’m new to Javascript/Jquery, so I’m not sure how to do this. I’ve tried using .first() and .closest(), but I can’t get it to work.

Answer 1

how

<script type="text/javascript">
 $(document).ready(function() {
  $.ajaxSetup({ cache: false });
  setInterval(function() {
   var id = $('#freshcontent > div').first()[0].id;
   $("#container").load("/webpage/?id="+id);
  }, 10000);
 });
</script>

why

$('#freshcontent > div') selects all direct div children in #freshcontent.

first() selects the first in the selected collection.

[0] gets the underlying html element.

id is the javascript property of an element that represents it’s “id”.

but…

This doesn’t include error handling,. If your “freshcontent” is empty, an error will be thrown in your js console and an ajax call will be made to “/webpage/?id=undefined”.

<script type="text/javascript">
 $(document).ready(function() {
  $.ajaxSetup({ cache: false });
  setInterval(function() {
   var first = $('#freshcontent > div').first();
   var id = "default value";
   if(!!first.length) {
     id = first[0].id;
   }
   $("#container").load("/webpage/?id=" + id);
  }, 10000);
 });
</script>

provides some error handling, making an ajax call with a “default value” to fetch the first few elements.