Counting the number of dynamically added divs in jquery

Question

I'm new to JQuery so I'm possibly doing this completely wrong. I want to count the number of divs there are within another div as I dynamically add to them. There are already several divs there already. Basically what I do is click a button, it adds a new div and alerts the total number of divs, the old plus the new. This is what I have so far and it's not working. Here's the Jquery:

<!-- Jquery to Add New Textarea -->

<script type="text/javascript">

    $(document).ready(function(){

        $('#addTertButton').click(function(){

            //Shows 
            alert($('div.addTertDiv').size());

            $('.addTertDiv').append("<?php echo $tertDiv; ?>");

        });
    });
</script>

And here is the php:

                    <div class="docedcont">
                        <div class="tertiarywrapper">
                            <?php

                                $counttert = count($this_rds->tertiary_array);
                                for($i = 0; $i < $counttert; ++$i) {
                                    echo("<div id='tertiaryselect'>");


                                        echo("<br />".$this_rds->rds_number.".".$this_rds->physreq_number.".".$this_rds->tertiary_array[$i]['tertiary_number']." ".$this_rds->tertiary_array[$i]['tertiary_title']."<br /><br />");

                                        echo("<textarea name=\"tertiary_text-".$i."\" cols=\"50\" rows=\"10\" class=\"dark\" onfocus=\"this.className='light'\" onblur=\"this.className='dark'\">");

                                            echo $this_rds->tertiary_array[$i]['tertiary_text'];

                                        echo("</textarea>");

                                        echo("<input name=\"tertiary_id-".$i."\" type=\"hidden\" value=\"".$this_rds->tertiary_array[$i]['tertiary_id']."\">");
                                        echo("<input name=\"tertiary_type-".$i."\" type=\"hidden\" value=\"gb,ie,in,ae\">");
                                        echo("<input name=\"tertiary_number-".$i."\" type=\"hidden\" value=\"".$this_rds->tertiary_array[$i]['tertiary_number']."\"> ");
                                        echo("<input name=\"tertiary_physreqlink_id-".$i."\" type=\"hidden\" value=\"".$this_rds->tertiary_array[$i]['tertiary_physreqlink_id']."\">");
                                        echo("<input name=\"tertiary_modby-".$i."\" type=\"hidden\" value=\"".$this_rds->tertiary_array[$i]['tertiary_modby']."\">");
                                        echo("<input name=\"tertiary_moddate-".$i."\" type=\"hidden\" value=\"".$this_rds->tertiary_array[$i]['tertiary_moddate']."\">");

                                        //Subsection Publish Checkbox
                                        echo("Publish Subsection");
                                        if ($this_rds->tertiary_array[$i]['tertiary_show']=="yes"){
                                            echo("<input name=\"tertiary_show-".$i."\" type=\"checkbox\" value=\"yes\" checked />");
                                        }
                                        else {
                                            echo("<input name=\"tertiary_show-".$i."\" type=\"checkbox\" value=\"no\" />");
                                        }

                                        echo("<input name=\"counttert\" type=\"hidden\" value=\"". $counttert."\">");

                                    echo("</div>"); 

                                }
                                    echo("<div class=\"addTertDiv\"></div>");

                            ?>
                        </div>
                    <?php                                                       
                        //Add New Subsection
                        //On button click create new textarea and increase "counttert"
                     echo ("<button type=\"button\" id=\"addTertButton\" value=\"".$counttert."\">Click Me!</button>");
                     ?> 
                    </div>

Any help would be greatly appreciated.

Answer 1

You want the length property:

alert($('div.addTertDiv').length);

Ok, apparently jQuery has a size function. length is more common, but size should work too.

Also, this line:

$('.addTertDiv').append("<?php echo $tertDiv; ?>");

will select all .addTertDivs, and append to each one the result of your echo. Is that what you want?

I think you may have wanted:

$('.tertiarywrapper').append("<?php echo $tertDiv; ?>");