Форум

imedia · #1 (**permalink**) 26.05.2014, 18:49

как посчитать какой по счету блок среди блоков одинаковым классом на который нажали?

<div id="preview_main_block">
			<div class="preview" id="slider_slide1"></div>
			<div class="preview" id="slider_slide2"></div>
			<div class="preview" id="slider_slide3"></div>
</div>

рони · #2 (**permalink**) 26.05.2014, 18:55

imedia,
взять все блоки с данным классом и перебрать пока не встретится нужный

рони · #3 (**permalink**) 26.05.2014, 19:04

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
</head>

<body>
<div id="preview_main_block">
			<div class="preview" id="slider_slide1">1</div>
			<div class="preview" id="slider_slide2">2</div>
			<div class="preview" id="slider_slide3">3</div>
</div>

<script>
	var elems = document.querySelectorAll(".preview");
	Array.prototype.forEach.call(elems, function(val, i)
	  {
	    val.onclick = function ()
	    {
	      alert(i+1);
	    }
	  }
	);
</script>
</body>

</html>

imedia · #4 (**permalink**) 26.05.2014, 20:12

а на jquery усть метод какой нибудь? и что такое index()?

рони · #5 (**permalink**) 26.05.2014, 20:37

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

а на jquery усть метод какой нибудь? и что такое index()?

да именно index()

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

WorM32 · #6 (**permalink**) 27.05.2014, 11:31

В данном случае вешать обработчик на каждый элемент это неправильный подход.

Нужно вешать единственный обработчик на родителя и смотреть на какого ребенка с нужным классом пришелся клик.

$(function () {
    var $parent = $('#preview_main_block');
    $parent.on('click', '.preview',  function () {
        alert($parent.find('.preview').index($(this)));
    });
});

http://jsfiddle.net/m7U4a/

Aetae · #7 (**permalink**) 27.05.2014, 11:41

В данном случае - взять из id.

рони · #8 (**permalink**) 27.05.2014, 11:48

http://jsfiddle.net/m7U4a/1/

WorM32 · #9 (**permalink**) 27.05.2014, 13:27

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

http://jsfiddle.net/m7U4a/1/

Да, если список динамически не будет изменяться)

Форум

Справочник

Discord чат

Курсы javascript