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

Страница 1 из 2

Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - узнать номер елемента в массиве при клике (https://javascript.ru/forum/misc/45445-uznat-nomer-elementa-v-massive-pri-klike.html)

blacklool

01.03.2014 02:07

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

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

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

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

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

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

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

ruslan_mart

01.03.2014 02:40

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

01.03.2014 04:42

<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

01.03.2014 05:13

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

<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

01.03.2014 05:22

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

Maxmaxmaxmaximus8

01.03.2014 21:58

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

01.03.2014 22:33

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

Цитата:

Сообщение от Poznakomlus

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

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

Цитата:

Сообщение от Poznakomlus

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

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

Aetae

01.03.2014 22:45

Цитата:

Сообщение от Maxmaxmaxmaximus8 (Сообщение 300187)

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

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

Maxmaxmaxmaximus8

01.03.2014 23:17

Цитата:

Сообщение от Poznakomlus

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

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

Цитата:

Сообщение от Aetae

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

нет, я просто ошибся, я напутал все с 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

02.03.2014 01:40

Цитата:

Сообщение от Poznakomlus

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

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

Цитата:

Сообщение от Poznakomlus

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

Привожу:

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

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

danik.js

02.03.2014 01:53

Почему никто не юзает Array.apply(null, arrayLike) ??
Этож самый короткий и самый шустрый способ приведения (Кроме Array.from, кстати его не вычеркнули из ES6?)

Vlasenko Fedor

02.03.2014 02:27

Цитата:

Сообщение от danik.js

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

Где ты видел у меня "use strict";
Даниил эт ты кому пишешь?

danik.js

02.03.2014 02:30

Цитата:

Сообщение от Poznakomlus

Где ты видел у меня "use strict";

use strict будет у меня или у человека, который скопипастит код. Приче use strict может быть проставлен в вышестоящей функии.

Цитата:

Сообщение от Poznakomlus

Даниил эт ты кому пишешь?

Автору этой реплики:

Цитата:

Сообщение от Poznakomlus

не посмотрел на твой код, дерьмо по сравнению с моим

Vlasenko Fedor

02.03.2014 02:40

Цитата:

Сообщение от danik.js

use strict будет у меня

твой последний пример не работает в каких версиях чего об этом не написал
И поясни

Цитата:

Сообщение от danik.js

Херовая практика использовать такие селекторы

Эт кому ты пишешь.

danik.js

02.03.2014 03:04

Писал про селектор div.a

danik.js

02.03.2014 03:06

Цитата:

Сообщение от Poznakomlus

твой последний пример не работает в каких версиях чего об этом не написал

Нафига? Автор юзал getElementsByClassName, что говорит о том что ему пофиг на IE8.

Vlasenko Fedor

02.03.2014 03:14

так автору адресуй про селектор div.a и
что ты скажешь про "use strict"; в примере

<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>
      var aa = function(){
      	 "use strict";
      }
      (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);
        };
      }());
      var bb = function(){
      	 "use strict";
      }
    </script>

danik.js

02.03.2014 03:43

Вышестоящей - вмысле выше по уровню, а не по расположению :)

(function(){
'use strict';

(function(){
    // тут тоже строгий режим действует
})()

})()

Vlasenko Fedor

02.03.2014 04:02

Принято :) Т.С должен был исковеркать код
Теперь
divs[i].onclick = handler;
и мой вариант
divs[i].setAttribute("onclick", "clval(" + i + ")")
ты вешаешь на каждый элемент обработчик, а я к каждому элементу добавляю вызов функции приведи аргументы, что твой вариант лучше

Aetae

02.03.2014 04:13

Лучше, ибо не говнокод.)
Внутри javascript записывать javascript код в виде строки(какие бы на то ни были причины) - моветон. Это очевидно любому, у кого наличествует чувство прекрасного.)

Vlasenko Fedor

02.03.2014 04:19

Цитата:

Сообщение от Aetae (Сообщение 300255)

чувство прекрасного.)

не аргумент :)
другие аргументы будут

danik.js

02.03.2014 05:14

Цитата:

Сообщение от Poznakomlus

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

У меня обработчик один. На все элементы навешиватеся всего лишь ссылка на него.

В твоем же случае создается по обработчику на элемент. Причем со всеми недостатками eval'а. А также неявно создается несколько with(){} блоков, что тоже не есть гуд.

Maxmaxmaxmaximus8

02.03.2014 13:02

Цитата:

Сообщение от danik.js

Почему никто не юзает

Потому что [].slice.apply(arguments, 2) ты можешь врым параметром передавать с какого места делать срез. Этот способ болеемощный. для arrayLike обьектов он не нужен, но все привыкли писать так и не хотят тратить время на определение где какой способ использовать. я думаю

ruslan_mart

02.03.2014 13:33

Maxmaxmaxmaximus8, с forEach гениальный вариант! :)

<!DOCTYPE HTML>
<html>
  <head></head>
  <body>
    <div class="a">Div 1</div>
    <div class="a">Div 2</div>
    <div class="a">Div 3</div>
    <div class="a">Div 4</div>
    <div class="a">Div 5</div>

    <script>
	var a = document.querySelectorAll('div.a');
    [].forEach.call(a, function(e, i) {
		e.onclick = function() {
			alert('Элемент ' + i + ': ' + e.textContent);
		}
	});
    </script>

  </body>
</html>

Maxmaxmaxmaximus8

02.03.2014 17:39

кококококомбо

<!DOCTYPE HTML>
<html>
  <head></head>
  <body>
    <div class="a">Div 1</div>
    <div class="a">Div 2</div>
    <div class="a">Div 3</div>
    <div class="a">Div 4</div>
    <div class="a">Div 5</div>

    <script>
    var elements = [].slice.call(document.querySelectorAll('div.a'));
    var listener = function () {
          alert(elements.indexOf(this))
    };

    elements.forEach(function (element) {
        element.addEventListener('click', listener)
    });
    </script>

  </body>
</html>

ruslan_mart

04.03.2014 09:34

Maxmaxmaxmaximus8, а почему сразу не [].forEach.call? Или есть подвох?

danik.js

04.03.2014 09:42

Цитата:

Сообщение от Ruslan_xDD

подвох?

[].indexOf.call?

ruslan_mart

04.03.2014 10:07

danik.js, ай всё, протупил. :)

danik.js

12.03.2014 08:46

Цитата:

Сообщение от danik.js

Почему никто не юзает Array.apply(null, arrayLike) ??

Цитата:

Сообщение от Maxmaxmaxmaximus8

Потому что [].slice.apply(arguments, 2)

Сегдня обнаружил, что это не работает с DOM в IE8.
Так что юзаем мой вариант Array.apply(null, nodeList) :)

Pechen

17.11.2014 20:10

я новичок в джаве --- подскажите чем плох мой код для такого случая?

<!DOCTYPE HTML>
<html>
  <head></head>
  <body>
    <div class="a">Div 1</div>
    <div class="a">Div 2</div>
    <div class="a">Div 3</div>
    <div class="a">Div 4</div>
    <div class="a">Div 5</div>

    <script>
	var elem = document.getElementsByTagName('div');
	var elements = [];
	for(var i=0; i<elem.length;i++){
		var option = elem[i].getAttribute('class');
		if(option=='a'){
			elements.push(elem[i]);
		}
	}
	for(var j=0;j<elements.length;j++){
		elements[j].onclick  = function () {
			alert(elements.indexOf(this));
			}
	}
    </script>
  </body>
</html>

рони	17.11.2014 20:14

Цитата:

Сообщение от Pechen

elem[i].getAttribute('class');

className
и зачем вычислять то что уже известно строка 22

Pechen

17.11.2014 21:00

рони,
спасибо, с className ранее я не пользовался -- думал в старых браузерах не работает)
а по строке 22 как лучше записать?

и является ли мой код оптимальным или выше по форуму предлагали реализации значительно лучше?

рони	17.11.2014 21:11

Pechen,
чем вас самого иные варианты неустроили?

Цитата:

Сообщение от Pechen

и является ли мой код оптимальным

нет, достаточно 1 цикла

рони	17.11.2014 21:20

Pechen,

<!DOCTYPE HTML>
<html>
  <head></head>
  <body>
    <div class="a">Div 1</div>
    <div class="a">Div 2</div>
    <div class="a">Div 3</div>
    <div class="a">Div 4</div>
    <div class="a">Div 5</div>

    <script>
for (var elem = document.getElementsByTagName("div"), a = 0, i = 0; i < elem.length; i++) {
    var option = elem[i].className;
    "a" == option && (elem[i].onclick = function(b) {
        return function() {
            alert(b)
        }
    }(a++))
};
    </script>
  </body>
</html>

Pechen

17.11.2014 21:51

Цитата:

Сообщение от рони (Сообщение 341436)

Pechen,
чем вас самого иные варианты неустроили?

примеры выше не работают в старых браузерах. я стараюсь избегать таких методов.

у меня недостаточно знаний чтобы понять как работает ваш пример))) в частности откуда берется значение b)

возможно, я не так выразился -- говоря "оптимальный" я имел ввиду можно ли его использовать или следует переписать?

рони	17.11.2014 21:55

Pechen,
если работает то можно )))

Цитата:

Сообщение от Pechen

откуда берется значение b)

из строки 18

рони	17.11.2014 22:00

Pechen,
http://javascript.ru/basic/closure

danik.js

17.11.2014 22:38

рони, че за уродство постишь? Не показывай ЭТО людям ))

рони	17.11.2014 22:43

danik.js,
что не так?

рони	17.11.2014 22:46

danik.js,
может лучше ответишь на вопросы тут
http://javascript.ru/forum/misc/5169...tml#post341208

Часовой пояс GMT +3, время: 01:43.

Страница 1 из 2

Показывать 40 сообщений этой темы на одной странице