узнать номер елемента в массиве при клике

[blacklool]

есть 5 дивов, с классом а

есть переменная myVar где -- > .getElementsByClassName('a');

потом addEvent.... и функция в которой нужно:

чтобы при клике на див у меня был alert с номером дива в массиве.

Пример для того чтобы обратиться к одному из дивов мне нужно делать так : myVar[х].

нужно чтобы в "х" заганялся номер дива на которого я кликнул и выводился через alert

[ruslan_mart]

var myVar = document.getElementsByClassName('a');

myVar[0].parentNode.addEventListener('click', function(e) {
   var self = e.target;
   if(self.className != 'a') return;
   var i = myVar.length;
   while(i--) {
      if(myVar[i] == self) {
         var x = i;
         break;
      }
   }

   alert(x);
});

[Vlasenko Fedor]

<style>
      div.a {
        padding:5px;
        margin: 5px;
        background-color: red;
        float: left;
      }
    </style>
    <div class="a">1</div>
    <div class="a">2</div>
    <div class="a">3</div>
    <div class="a">4</div>
    <div class="a">5</div>
    <script>
      (function () {
        var divs = document.querySelectorAll("div.a"),
          len = divs.length,
          i = 0;
        for (; divs[i].setAttribute("onclick", "clval(" + i + ")"), ++i < len;);
        clval = function (e) {
          alert(e);
        };
      }());
    </script>

[danik.js]

Фу setAttribute('onclick'), фу clval без var.

<style>
  div.a {
    padding:5px;
    margin: 5px;
    background-color: red;
    float: left;
  }
</style>
<div class="a">1</div>
<div class="a">2</div>
<div class="a">3</div>
<div class="a">4</div>
<div class="a">5</div>
<script>
  (function () {
    var divs = document.querySelectorAll("div.a");
    var handler = function() {
        // var index = this.dataset.index;
        var index = this.getAttribute('data-index');
        alert(index);
    }
    for (var i = 0; i < divs.length; i++) {
        // divs[i].dataset.index = i;
        divs[i].setAttribute('data-index', i);
        divs[i].onclick = handler;
    }
  }());
</script>

ES5:

<style>
  div.a {
    padding:5px;
    margin: 5px;
    background-color: red;
    float: left;
  }
</style>
<div class="a">1</div>
<div class="a">2</div>
<div class="a">3</div>
<div class="a">4</div>
<div class="a">5</div>
<script>
  (function () {
    var divs = document.querySelectorAll("div.a");
    var handler = function() {
        var index = Array.prototype.indexOf.call(divs, this);
        alert(index);
    }
    for (var i = 0; i < divs.length; i++) {
        divs[i].onclick = handler;
    }
  }());
</script>

[Aetae]

Вообще, имхо, индекс нафиг не нужен, как и массив. Кликнутый див в колбэк и так передаётся через target/this.)

[Maxmaxmaxmaximus8]

var elements = document.querySelectorAll('.a') || [];
elements = [].slice.apply(elements); // toArray

elements.forEach(function (element, i) {
    element.addEventListener('click', function () {
        alert(this); // див на который кликнули
        alert(element); // див на который кликнули
        alert(i); // номер дива на который кликнули
    })
});

учитесь рукожопчики мои

[Maxmaxmaxmaximus8]

показал заодно парню как с селекторами работать, как ты заметил. думаешь путаницы больше вносит?

при чем здесь || [];

если вернется null. нельзя делать slice.apply( null )

и написали ведь есть клсс a

ох лол, опечатался)

[Aetae]

если вернется null.

querySelectorAll null вроде не возвращает, или в каком-то браузере таки пакостит?

[Maxmaxmaxmaximus8]

в задаче явно описано дивы есть

да достал ты придираться, если он на столько тупой что не догадается подменить селектор под свою задачу, то программирование это явно не его

или в каком-то браузере таки пакостит?

нет, я просто ошибся, я напутал все с querySelector и коллекциями.

var elements = [].slice.call(document.querySelectorAll('.a'));


elements.forEach(function (element, i) {
    element.addEventListener('click', function () {
        alert(this); // див на который кликнули
        alert(element); // див на который кликнули
        alert(i); // номер дива на который кликнули
    })
});

[danik.js]

в задаче явно описано дивы есть

Херовая практика использовать такие селекторы. Хотя откуда тебе знать-то..

приведи где код не работает

Привожу:

<style>
      div.a {
        padding:5px;
        margin: 5px;
        background-color: red;
        float: left;
      }
    </style>
    <div class="a">1</div>
    <div class="a">2</div>
    <div class="a">3</div>
    <div class="a">4</div>
    <div class="a">5</div>
    <script>
      (function () {
        "use strict";
        var divs = document.querySelectorAll("div.a"),
          len = divs.length,
          i = 0;
        for (; divs[i].setAttribute("onclick", "clval(" + i + ")"), ++i < len;);
        clval = function (e) {
          alert(e);
        };
      }());
    </script>

Ну и вобще речь не про работает/не работает.
Ты ведь сам знаешь - бывает код работает, но в адрес его автора хочется сказать много нехороших слов.