Get number of elements in a page

Question

Let's say you have 5 <divs> with stuff in them but all have some content. So it's like:

<div class='module-class' id='module-1'>Hello world. <button class='delete'>X</button></div>
<div class='module-class' id='module-2'>Testing <button class='delete'>X</button></div>
<div class='module-class' id='module-3'>This is text <button class='delete'>X</button></div>
<div class='module-class' id='module-4'>Moon and Sun <button class='delete'>X</button></div>

Let's say you click inside the <button> that has This is text . So, obviously, it's 3rd in the page. So you would get back "Clicked on 'module-3'`

How would you do that?

Answer 1

$('.module-class').click(function(e){
    console.log("Clicked on '" + $(this).attr('id') + "'");
});

Answer 2

You can do this without jQuery as well.

(function() {
    try {
      var _divs = document.getElementsByTagName('div');
    } catch(e) {
      console.log("_divs returned undefined");
      return;
    }
    Array.prototype.forEach.call(_divs, function(el) {
        el.addEventListener('click', function() {
            console.log('div#' + this.id + ' was clicked');
        });
    });
})();

http://jsfiddle.net/V98kE/