ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / JS показать первый span
40 сообщений из 40, показаны все 2 страниц
  все  
JS показать первый span
    #38796461
vbvvvv
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vbvvvv
Гость
подскажите, ато запутался в "хлам":)
Код: html
1.
2.
3.
4.
5.
6.
7.
<ul>
<li>
<span> Болото 
<strong> Б </strong>
<span> олото </span>
</li>
</ul>


у меня есть возможно нажатия на тот или иной span, при нажатии на первый я получаю значение innerHTML "Болото", на второй "олото"
как сделать, что всегда выдавало значение первого span в наборе данного списка
...
Рейтинг: 0 / 0
05.11.2014, 15:37
| Ответить | Цитировать | Написать  
JS показать первый span
    #38796475
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
vbvvvvкак сделать, что всегда выдавало значение первого span в наборе данного списка
- Выходить на родителя
- Брать его первый спан
...
Рейтинг: 0 / 0
05.11.2014, 15:43
| Ответить | Цитировать | Написать  
JS показать первый span
    #38796492
vbvvvv
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vbvvvv
Гость
krvsa,
а как?
можно только через колекцию? или как-то можно по-другому.
можно хоть один рабочий пример, ато у меня ничего не получается
...
Рейтинг: 0 / 0
05.11.2014, 16:01
| Ответить | Цитировать | Написать  
JS показать первый span
    #38796509
brbrbr
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
brbrbr
Участник
Код: javascript
1.
$("ul span").eq(0)


Вполне себе рабочий.
...
Рейтинг: 0 / 0
05.11.2014, 16:16
| Ответить | Цитировать | Написать  
JS показать первый span
    #38796515
alex564657498765453
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
alex564657498765453
Участник
буквы Ви и Би находяться радом на клаве... по его нику можно судить о причине не получаеться. :)
...
Рейтинг: 0 / 0
05.11.2014, 16:19
| Ответить | Цитировать | Написать  
JS показать первый span
    #38796532
vbvvvv
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vbvvvv
Гость
brbrbr
спасибо за вариант
но, я не использую JQUERY и не буду - там полная каша
мне нужна подсказка на чистом JS
не так давно начал изучать, поэтому возникают сложности
...
Рейтинг: 0 / 0
05.11.2014, 16:36
| Ответить | Цитировать | Написать  
JS показать первый span
    #38796545
carrotik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
carrotik
Участник
vbvvvv,

Свойства firstChild и lastChild
...
Рейтинг: 0 / 0
05.11.2014, 16:51
| Ответить | Цитировать | Написать  
JS показать первый span
    #38796566
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
vbvvvv,

примерчик...
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
<!DOCTYPE html>
<html>
<head>
</head>
<body> 
<button onclick="GetSpan()">Run</button>
<ul id="asdf">
	<li>
		<span>Иванов?</span>
		<strong>Я!</strong> <br>
		<span>Петров?</span>
	</li>
</ul>
</body>

<script type='text/javascript'>
function GetSpan() {
	var num = 1; // номер span, который надо найти
	var k = 0;
	var ch = document.getElementById('asdf').children[0].children;
	for (i=0; i < ch.length; i++) {
		if (ch[i].tagName.toUpperCase() == 'SPAN') {
			k++;
			if (k == num) {alert(ch[i].innerHTML); return;}
		}
	}
};
</script>
</html>
...
Рейтинг: 0 / 0
05.11.2014, 17:05
| Ответить | Цитировать | Написать  
JS показать первый span
    #38796705
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
vbvvvvможно только через колекцию? или как-то можно по-другому.
Всегда нужно стараться использовать удобные варианты... Т.е. и так, и так можно делать...

vbvvvvможно хоть один рабочий пример, ато у меня ничего не получается
Так и ты пока ничего рабочего не показал...

vbvvvvу меня есть возможно нажатия на тот или иной span, при нажатии на первый я получаю значение innerHTML "Болото", на второй "олото"
Как у тебя это сделано? Сделай полный пример - на нем можно будет показать некий вариант реализации...
...
Рейтинг: 0 / 0
05.11.2014, 19:36
| Ответить | Цитировать | Написать  
JS показать первый span
    #38796720
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
vbvvvv, как-то так:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
<!DOCTYPE HTML>
<html>  
<head></head>  
<body>
  <ul onclick="onListClick(this,event)">
    <li>
      <span>Болото</span>
      <b>Б</b><span>олото</span>
      <span><b>Д</b>олото</span>      
      <b>М</b><span>олото<b>к</b></span>
    </li>
  </ul>
  <script>
    function firstSimilarSibling(element) {
      var sibling = element.previousSibling,
          similarSibling = element;
      
      while (sibling) {
        if (sibling.tagName == element.tagName) {
          similarSibling = sibling;
        }
        
        sibling = sibling.previousSibling;
      }
      
      return similarSibling;
    }
    
    function onListClick(sender, e) {
      var event = e || window.event,
          target = event.target || event.srcElement,
          targetSibling,
          targetTagName = target.tagName;
      
      switch(targetTagName) {
        case 'SPAN':
          targetSibling = firstSimilarSibling(target);
          
          alert(targetSibling.innerHTML);
          break;
      }
    }
  </script>
</body>
</html>


Навигация в DOM, свойства-ссылки
...
Рейтинг: 0 / 0
05.11.2014, 20:02
| Ответить | Цитировать | Написать  
JS показать первый span
    #38796829
Да ну
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Да ну
Участник
До кучи:
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
function onListClick(sender, e) {
   for (
      var node = (e=e||event).target||e.srcElement;
      node && node.tagName != 'LI';
      node=node.parentElement
   ) {};
   if (node) alert(node.children[0].innerHTML);
}
...
Рейтинг: 0 / 0
06.11.2014, 00:27
| Ответить | Цитировать | Написать  
JS показать первый span
    #38796925
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Ребята, вы явно перебарщиваете...

У ТСа есть уже обработка клика на спан. А вы что-то нагородили в стиле нидзя.
...
Рейтинг: 0 / 0
06.11.2014, 08:11
| Ответить | Цитировать | Написать  
JS показать первый span
    #38797027
vbvvvv
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vbvvvv
Гость
Огромное спасибо!
Мне все примеры пригодятся, думаю разберусь
...
Рейтинг: 0 / 0
06.11.2014, 10:30
| Ответить | Цитировать | Написать  
JS показать первый span
    #38797040
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
krvsaРебята, вы явно перебарщиваете...

У ТСа есть уже обработка клика на спан. А вы что-то нагородили в стиле нидзя. Уася, в каком таком стиле ниндзя-шминдзя?
я ему показал как делается делегирование и дал ссылку на учебник, чтобы разбирался!
...
Рейтинг: 0 / 0
06.11.2014, 10:41
| Ответить | Цитировать | Написать  
JS показать первый span
    #38797042
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
vbvvvvОгромное спасибо!
Мне все примеры пригодятся, думаю разберусьНе за что, ссылкой на учебник не забудьте воспользоваться.
...
Рейтинг: 0 / 0
06.11.2014, 10:42
| Ответить | Цитировать | Написать  
JS показать первый span
    #38797223
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
skyANAУася, в каком таком стиле ниндзя-шминдзя?
Для меня "стиль нидзя" это рабочий код... Но написанный как можно непонятнее, с применением "особенных" возможностей синтаксиса языка.
...
Рейтинг: 0 / 0
06.11.2014, 13:11
| Ответить | Цитировать | Написать  
JS показать первый span
    #38797296
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
krvsa, стиль ниндзя - это следующее: Как писать неподдерживаемый код?
...
Рейтинг: 0 / 0
06.11.2014, 14:04
| Ответить | Цитировать | Написать  
JS показать первый span
    #38797304
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
И что не понятно в моём коде?

Там используется Делегирование событий , а метод поиска первого похожего соседа вынесен из обработчика в отдельную функцию, чтобы не перегружать сам обработчик.
...
Рейтинг: 0 / 0
06.11.2014, 14:07
| Ответить | Цитировать | Написать  
JS показать первый span
    #38798113
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
skyANAkrvsa, стиль ниндзя - это следующее: Как писать неподдерживаемый код?
У меня просто свое представление об этом...
...
Рейтинг: 0 / 0
07.11.2014, 08:08
| Ответить | Цитировать | Написать  
JS показать первый span
    #38798115
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
skyANAИ что не понятно в моём коде?
Дык дело не совсем в коде... Дело в самой реализации исходной задачи ТСа... У него уже есть обработка клика на спанах, осталось всего ничего:
- взять родителя
- взять первый спан
...
Рейтинг: 0 / 0
07.11.2014, 08:10
| Ответить | Цитировать | Написать  
JS показать первый span
    #38798449
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
krvsaskyANAИ что не понятно в моём коде?
Дык дело не совсем в коде... Дело в самой реализации исходной задачи ТСа... У него уже есть обработка клика на спанах, осталось всего ничего:
- взять родителя
- взять первый спанНу то есть ты предлагаешь всё это делать в самом обработчике, не вынося поиск первого спана в отдельный метод? Это и есть ниндзя код.
Вернея ниндзя обработчик.
...
Рейтинг: 0 / 0
07.11.2014, 13:20
| Ответить | Цитировать | Написать  
JS показать первый span
    #38798589
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
skyANAНу то есть ты предлагаешь всё это делать в самом обработчике, не вынося поиск первого спана в отдельный метод?
Мне просто кажутся, вышеприведенные решения, черезчур сложными для решения проблемы ТСа...

Т.е. я не про сам подход к решению проблемы... А именно в этом конкретном случае с "дано".
...
Рейтинг: 0 / 0
07.11.2014, 15:02
| Ответить | Цитировать | Написать  
JS показать первый span
    #38798607
Фотография Изопропил
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Изопропил
Участник
krvsa,

ничего лишнего в firstSimilarSibling не наблюдаю.
...
Рейтинг: 0 / 0
07.11.2014, 15:13
| Ответить | Цитировать | Написать  
JS показать первый span
    #38798643
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Изопропил , я тут высказываю лишь свое мнение... Другим его никак не навязываю...
...
Рейтинг: 0 / 0
07.11.2014, 15:38
| Ответить | Цитировать | Написать  
JS показать первый span
    #38800852
vbvvvv
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vbvvvv
Гость
возникла еще проблемка:
Код: javascript
1.
2.
3.
4.
5.
6.
7.
function selectHelp(ev,inp){
    var event = ev || window.event;
    var target = event.target || event.srcElement;
    //console.log(target.parentNode.nodeName);
    document.getElementById('obl').value = (target.parentNode.nodeName=='LI' || '') && target.parentNode.children[0].innerHTML;
    document.getElementById('select_list').style.display = 'none';
    }


у меня куча input, для каждого событие onclick='selectHelp(event,obl)'
я пытаюсь передать название id нужного input, к примеру selectHelp(event,obl) или selectHelp(event,city)

<
Код: javascript
1.
input type="text" name="obl" id="obl" placeholder="Область" onkeyup='createHelpList(event,rn)' />



но в JS для каждого id резервируется переменная в window походу, поэтому мне выдает в переменной id содержание инпута, а я хочу в функцию передать текст вида 'obl' и подставить его в document.getElementById(сюда подставить переменную).value
но не получается
...
Рейтинг: 0 / 0
10.11.2014, 14:46
| Ответить | Цитировать | Написать  
JS показать первый span
    #38800858
vbvvvv
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vbvvvv
Гость
в спешке пишу, может не мовсем понятно написал
я хочу вызвать selectHelp(ev,inp){
.......
document.getElementById(сюда передать содержание inp)
.......
}
...
Рейтинг: 0 / 0
10.11.2014, 14:49
| Ответить | Цитировать | Написать  
JS показать первый span
    #38800891
carrotik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
carrotik
Участник
vbvvvv,

.. target.id ?
...
Рейтинг: 0 / 0
10.11.2014, 15:05
| Ответить | Цитировать | Написать  
JS показать первый span
    #38800900
vbvvvv
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vbvvvv
Гость
carrotik,
не подойдет, т.к. input с выпадащим списком не связан
...
Рейтинг: 0 / 0
10.11.2014, 15:10
| Ответить | Цитировать | Написать  
JS показать первый span
    #38800910
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
vbvvvv,

this
...
Рейтинг: 0 / 0
10.11.2014, 15:13
| Ответить | Цитировать | Написать  
JS показать первый span
    #38800915
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
Введение в браузерные события - Доступ к элементу, this

Если ещё вопросы возникнут, то почитайте другие разделы учебника.
...
Рейтинг: 0 / 0
10.11.2014, 15:15
| Ответить | Цитировать | Написать  
JS показать первый span
    #38800917
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
Ну и получается, что Вы не читали главу про Делегирование событий. Печально.
...
Рейтинг: 0 / 0
10.11.2014, 15:17
| Ответить | Цитировать | Написать  
JS показать первый span
    #38800928
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
Ну и пример:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
<!DOCTYPE HTML>
<html>
<head></head>
<body>
  <input onclick="onInputClick(this,event)" value="Тверская область"/>
  <script>
    function onInputClick(sender, e) {
      alert(sender.value); // Тверская область
    }
  </script>
</body>
</html>
...
Рейтинг: 0 / 0
10.11.2014, 15:22
| Ответить | Цитировать | Написать  
JS показать первый span
    #38800930
vbvvvv
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vbvvvv
Гость
skyANA,
про делегирование я прочитал и я знаю что это, Спасибо
просто для начала хочу сделать рабочий код, а дальше рефакторинг
...
Рейтинг: 0 / 0
10.11.2014, 15:23
| Ответить | Цитировать | Написать  
JS показать первый span
    #38800938
vbvvvv
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vbvvvv
Гость
this не подойдет
мы выбираем из появившегося списка значение (аналог ui autocomplete) по ENTER , либо кликаем мышкой и this вернет ссылку именно на этот список, а мне нужно значение записать в один из пяти imput.
"корявые способы знаю", но как минимально и "красиво" это написать не понятно
...
Рейтинг: 0 / 0
10.11.2014, 15:33
| Ответить | Цитировать | Написать  
JS показать первый span
    #38800993
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
Тогда не спешите пожалуйста, а чётко сформулируйте то, чего хотите, и пример нормальный приводите.
vbvvvvу меня куча input, для каждого событие onclick='selectHelp(event,obl)'vbvvvvв спешке пишу, может не мовсем понятно написал
я хочу вызвать selectHelp(ev,inp){
.......
document.getElementById(сюда передать содержание inp)
.......
}И вот при чём тут "мы выбираем из появившегося списка значение"?
...
Рейтинг: 0 / 0
10.11.2014, 15:54
| Ответить | Цитировать | Написать  
JS показать первый span
    #38801010
vbvvvv
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vbvvvv
Гость
skyANA,
вот Пример Fiddle
...
Рейтинг: 0 / 0
10.11.2014, 16:04
| Ответить | Цитировать | Написать  
JS показать первый span
    #38801013
Фотография Konst_One
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Konst_One
Участник
vbvvvvskyANA,
вот Пример Fiddle

...ul id=' select_lis t'...

id не уникальный
...
Рейтинг: 0 / 0
10.11.2014, 16:06
| Ответить | Цитировать | Написать  
JS показать первый span
    #38801053
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
vbvvvvно в JS для каждого id резервируется переменная в window походу, поэтому мне выдает в переменной id содержание инпута, а я хочу в функцию передать текст вида 'obl' и подставить его в document.getElementById(сюда подставить переменную).value
но не получается
Как вариант...

Код: html
1.
onkeyup='createHelpList(this.id,event,rn)'
...
Рейтинг: 0 / 0
10.11.2014, 16:26
| Ответить | Цитировать | Написать  
JS показать первый span
    #38801059
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
vbvvvv,
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
<!DOCTYPE HTML>
<html>  
<head>
  <style>
    ul { list-style: none; padding: 0; }    
    li { cursor: pointer; }
  </style>
</head>  
<body>
  <input id="selectedRegion" />
  <ul data-targetId="selectedRegion" onclick="onListClick(this,event)">
    <li>Амурская область</li><!-- <li>Архангельская область</li> -->
    <li>Астраханская область</li><!-- <li>Белгородская область</li> -->
    <li>Брянская область</li><!-- <li>Владимирская область</li> -->
    <li>Волгоградская область</li><!-- <li>Вологодская область</li> -->
    <li>Воронежская область</li><!-- <li>Ивановская область</li> -->
    <li>Иркутская область</li><!-- <li>Калиниградская область</li> -->
    <li>Калужская область</li><!-- <li>Камчатская область</li> -->
    <li>Кемеровская область</li><!-- <li>Кировская область</li> -->
    <li>Костромская область</li><!-- <li>Курганская область</li> -->
    <li>Курская область</li><!-- <li>Ленинградская область</li> -->
    <li>Липецкая область</li><!-- <li>Магаданская область</li> -->
    <li>Московская область</li><!-- <li>Мурманская область</li> -->
    <li>Нижегородская область</li><!-- <li>Новгородская область</li> -->
    <li>Новосибирская область</li><!-- <li>Омская область</li> -->
    <li>Оренбургская область</li><!-- <li>Орловская область</li> -->
    <li>Пензенская область</li><!-- <li>Пермская область</li> -->
    <li>Псковская область</li><!-- <li>Ростовская область</li> -->
    <li>Рязанская область</li><!-- <li>Самарская область</li> -->
    <li>Саратовская область</li><!-- <li>Сахалинская область</li> -->
    <li>Свердловская область</li><!-- <li>Смоленская область</li> -->
    <li>Тамбовская область</li><!-- <li>Тверская область</li> -->
    <li>Томская область</li><!-- <li>Тульская область</li> -->
    <li>Тюменская область</li><!-- <li>Ульяновская область</li> -->
    <li>Челябинская область</li><!-- <li>Читинская область</li> -->
    <li>Ярославская область</li>
  </ul>
  <script>
    function onListClick(sender, e) {
      var event = e || window.event,
          target = event.target || event.srcElement,
          targetInputId = sender.getAttribute('data-targetid');
      
      switch (target.tagName) {
        case 'LI':
          document.getElementById(targetInputId).value = target.innerHTML;
          break;
      }
    }
  </script>
</body>
</html>

Идея понятна?

При создании списка укажите с каким input он связан через атрибут data-targetId.

Техника называется data-* attributes . Поддерживается в различных библиотеках. Погуглите.
...
Рейтинг: 0 / 0
10.11.2014, 16:31
| Ответить | Цитировать | Написать  
JS показать первый span
    #38801203
vbvvvv
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vbvvvv
Гость
skyANA,
Спасибо, идея понятна
думаю с этим разберусь
...
Рейтинг: 0 / 0
10.11.2014, 18:14
| Ответить | Цитировать | Написать  
40 сообщений из 40, показаны все 2 страниц
  все  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / JS показать первый span
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?all=1&fid=22&tid=1446553]:
 0ms
get settings:
 7ms
get forum list:
 18ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 58ms
get topic data:
 9ms
get forum data:
 2ms
get page messages:
 67ms
get tp. blocked users:
 1ms
others: 234ms
total:  402ms
созд. / загр.: 402ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]