Databases
StackOverflow2013
Postsdbo
PODynamically Add 1 to id/class on appended div with jQuery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODynamically Add 1 to id/class on appended div with jQuery
    text
    copied!<p>I am trying to add 1 to any newly appended id/class:</p> <p>jQuery:</p> <pre><code>$(function(){ $("#add-new-student").click(function() { $("ul#student-list").append('&lt;li class="student3"/&gt;Student&lt;/li&gt;'); $("div#student-courses").append('&lt;div id="student3" class="student-information"&gt;' + '&lt;div id="student3-enrolled-courses"&gt;' + '&lt;span class="english"&gt;English&lt;/span&gt;' + '&lt;span class="technology"&gt;Technology&lt;/span&gt;' + '&lt;/div&gt;' + '&lt;/div&gt;' ); }); }); </code></pre> <p>HTML:</p> <pre><code>&lt;input type="submit" id="add-new-student" value="Add New Student"&gt; &lt;ul id="student-list"&gt; &lt;li class="student1"/&gt;Student&lt;/li&gt; &lt;li class="student2"/&gt;Student&lt;/li&gt; &lt;/ul&gt; &lt;div id="student-courses"&gt; &lt;div id="student1" class="student-information"&gt; &lt;div id="student1-enrolled-courses"&gt; &lt;span class="english"&gt;English&lt;/span&gt; &lt;span class="technology"&gt;Technology&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="student2" class="student-information"&gt; &lt;div id="student2-enrolled-courses"&gt; &lt;span class="english"&gt;English&lt;/span&gt; &lt;span class="technology"&gt;Technology&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>I set up two fiddles:<br /> <a href="http://jsfiddle.net/KHfyY/" rel="nofollow">http://jsfiddle.net/KHfyY/</a> uses after instead of append and finds the div.student-information:last<br /> <a href="http://jsfiddle.net/KHfyY/1/" rel="nofollow">http://jsfiddle.net/KHfyY/1/</a> uses the code here with append for both</p> <p>Whichever one is best for this should be the one we can use.</p> <p>If there are no students, then the first class/id's should be student1. If there are students as in the code, it should increment it by 1 based on the last student number. Any idea how this can be done?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload