За последние 24 часа нас посетили 17828 программистов и 1719 роботов. Сейчас ищут 900 программистов ...

JS - Узнать номер элемента в массиве

Тема в разделе "JavaScript и AJAX", создана пользователем VLK, 6 окт 2014.

  1. VLK

    VLK Старожил

    С нами с:
    15 дек 2013
    Сообщения:
    3.010
    Симпатии:
    58
    Есть такой код
    Код (Text):
    1. <div>
    2. <span>один</span>
    3. <span>два</span>
    4. <span>три</span>
    5. </div>
    на самом деле теги span это кнопки, по клику на них должно происходить что то.
    Мне надо узнать на какой конкретно по счету span было нажатие, что бы было более понятно, немного кода:
    Код (Text):
    1. // при нажатии на тот или иной span происходит примерно следующий
    2. var A = this.parentNode.getElementsByTagName('span'); // получили массив со всеми span который находит в блоке div
    3. // мне надо узнать какой по счету span был нажат, A[0] или A[1] или A[2], причем интересует именно цифра
    PS меня интересует, может есть какой то свойство или метод, который возвращает эту цифру (позицию в массиве) все же есть зацепка в виде this, если нет, то я сам код распишу для поиска (мысли как это сделать есть).
     
    #1 VLK, 6 окт 2014
  2. dapperkop

    dapperkop Активный пользователь

    С нами с:
    26 сен 2013
    Сообщения:
    890
    Симпатии:
    0
    Код (PHP):
    1. A.indexOf(yourElement); // вернет индекс элемента в массиве или -1, если элемент не найден   
    Ну а вообще, я бы сделал немного иначе... Я бы забиндил на каждый элемент отдельное событие.

    Добавлено спустя 9 минут 21 секунду:
    А может и нет...
     
    #2 dapperkop, 6 окт 2014
  3. Ganzal

    Ganzal Суперстар
    Команда форума Модератор

    С нами с:
    15 мар 2007
    Сообщения:
    9.893
    Симпатии:
    965
    не припомню нативной функции. посмотрите реализацию метода .index() той же самой jQuery
     
    #3 Ganzal, 6 окт 2014
  4. VLK

    VLK Старожил

    С нами с:
    15 дек 2013
    Сообщения:
    3.010
    Симпатии:
    58
    Объясню суть есть два блока, первый кнопки, второй текст, по нажатию на кнопку соответствующий блок должен допустим под светиться (изменить цвет фона), блоки симметричны, т.е. если нажат span идущий второй, значит и блок с текстом должен под светиться второй.

    Кнопки:
    Код (Text):
    1. <div>
    2. <span>один</span>
    3. <span>два</span>
    4. <span>три</span>
    5. </div>
    тексты:
    Код (Text):
    1. <div>
    2. <div>текст один</div>
    3. <div>текст два</div>
    4. <div>текст три</div>
    5. </div>
    вот мне и надо вычислять индексы самым кротчайшим способом.
     
    #4 VLK, 6 окт 2014
  5. metadon

    metadon Активный пользователь

    С нами с:
    6 фев 2006
    Сообщения:
    779
    Симпатии:
    0
    Просто присвой им id, и по нему обращайся
     
    #5 metadon, 6 окт 2014
  6. dapperkop

    dapperkop Активный пользователь

    С нами с:
    26 сен 2013
    Сообщения:
    890
    Симпатии:
    0
    Ты можешь написать так.
    Код (Text):
    1.  
    2. <span to="div_1">span 1</span>
    3. <span to="div_2">span 2</span>
    4. <span to="div_3">span 3</span>
    Берешь аттрибут to. И ищешь среди:
    Код (Text):
    1.  
    2. <div class="div_1">div 1</div>
    3. <div class="div_2">div 2</div>
    4. <div class="div_3">div 3</div>
    Или что-то в этом роде.

    Итого, получается один обработчик на все клики. Ну или как ты задумал...
     
    #6 dapperkop, 6 окт 2014
  7. VLK

    VLK Старожил

    С нами с:
    15 дек 2013
    Сообщения:
    3.010
    Симпатии:
    58
    dapperkop, а что за атрибут такой to?
     
    #7 VLK, 6 окт 2014
  8. dapperkop

    dapperkop Активный пользователь

    С нами с:
    26 сен 2013
    Сообщения:
    890
    Симпатии:
    0
    Взятый из головы аттрибут. Кастомный, так сказать =)
     
    #8 dapperkop, 6 окт 2014
  9. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    Нынче это не модно. Нынче модно юзать нативный механизм: http://htmlbook.ru/samouchitel-html5/atributy-data

    Если ты хочешь привязать какие-то действия к спанам, то наверное это действия над чем-то, связанные с чем-то. Так вот это что-то как-то идентифицируется же. И как раз этот идентификатор и надо вписать в дата-атрибут. Тогда тебе будет всё равно на каком именно кликнули, и ты будешь из атрибута получать то, что нужно для действия.
    Пример:
    Код (Text):
    1. <span data-message="7">Кликни</span>
    Код (Text):
    1. <div id="message-7">...</div>
    Соотв вешаешь онклик, в котором $('#message-' + $(this).data('message')).hide();
     
    #9 igordata, 6 окт 2014
  10. rognorog

    rognorog Новичок

    С нами с:
    7 июл 2014
    Сообщения:
    330
    Симпатии:
    0
    Ну так - это же массивы, у них начинается индекс с 0 - n, так возьми и разложи и увидишь, что жмешь.
     
    #10 rognorog, 7 окт 2014
  11. torrius

    torrius Активный пользователь

    С нами с:
    28 июн 2014
    Сообщения:
    35
    Симпатии:
    1
    Если на CSS3:
    Код (Text):
    1.  
    2. <!DOCTYPE HTML>
    3. <html>
    4.     <head>
    5.         <style>
    6.             input[name=bgcolor]{
    7.                 display: none;
    8.             }
    9.             input[name=bgcolor]:checked + *{
    10.                 color: red;
    11.             }
    12.         </style>
    13.     </head>
    14.     <body>
    15.         <div>
    16.             <label for="r1">один</label>
    17.             <label for="r2">два</label>
    18.             <label for="r3">три</label>
    19.         </div>
    20.         <div>
    21.             <input id="r1" type="radio" name="bgcolor"/>
    22.             <div>текст один</div>
    23.             <input id="r2" type="radio" name="bgcolor"/>
    24.             <div>текст два</div>
    25.             <input id="r3" type="radio" name="bgcolor"/>
    26.             <div>текст три</div>
    27.         </div>
    28.     </body>
    29. </html>
    и js не нужен ;)
     
    #11 torrius, 19 ноя 2014
  12. Ganzal

    Ganzal Суперстар
    Команда форума Модератор

    С нами с:
    15 мар 2007
    Сообщения:
    9.893
    Симпатии:
    965
    а как потом в жс с этим работать?
     
    #12 Ganzal, 19 ноя 2014
  13. torrius

    torrius Активный пользователь

    С нами с:
    28 июн 2014
    Сообщения:
    35
    Симпатии:
    1
    суть вопроса
    вроде решено, не? ))
    Если же:
    то:
    Код (Text):
    1.  
    2.     <head>
    3.         <script type="text/javascript">
    4.        
    5.             function getIndexMenu(tar){
    6.                 var elems = tar.parentNode.children;
    7.                 for(var i = 0; i < elems.length; i++){
    8.                     if(elems[i] == tar) break;
    9.                 }
    10.                 return i;
    11.             }
    12.             document.onclick = function(e){
    13.                 e = e || window.event;
    14.                 var tar = e.target || e.srcElement;
    15.                 if(tar.tagName == 'LI' && tar.parentNode.getAttribute('id') == 'menu')
    16.                     alert(getIndexMenu(tar));
    17.             }
    18.         </script>
    19.     </head>
    20.     <body>
    21.         <ul id="menu">
    22.             <li>один</li>
    23.             <li>два</li>
    24.             <li>три</li>
    25.         </ul>
    26.     </body>
     
    #13 torrius, 19 ноя 2014
  14. Ganzal

    Ganzal Суперстар
    Команда форума Модератор

    С нами с:
    15 мар 2007
    Сообщения:
    9.893
    Симпатии:
    965
    torrius, давайте зачётку :D
     
    #14 Ganzal, 19 ноя 2014
  15. rognorog

    rognorog Новичок

    С нами с:
    7 июл 2014
    Сообщения:
    330
    Симпатии:
    0
    querySelectorAll и на заметку.
    Ну и XPath для современных браузеров =)
     
    #15 rognorog, 30 ноя 2014
(Вы должны войти или зарегистрироваться, чтобы разместить сообщение.)