获取页面中的元素数

Question

假设您有5个<divs>，其中包含一些内容，但是它们都有一些内容。所以就像：

<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>

假设您在具有<button>的This is text中单击。所以，很明显，这是第三页。这样你就可以“点击‘模块-3’了”

你会怎么做？

Answer 1

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

Answer 2

您也可以在没有jQuery的情况下做到这一点。

(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/