Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.01.2011, 17:51
Аспирант
Отправить личное сообщение для revvo Посмотреть профиль Найти все сообщения от revvo
 
Регистрация: 17.01.2011
Сообщений: 38

Получить доступ к "почти соседнему" элементу через target
Есть форма с такой структурой полей
<dl>
	<dt><label for="phone">Phone</label><span class="add-link" style="margin-left:213px" onclick="addField()">add</span></dt>
	<dd><input type="text" id="phone" class="long-input" name="phone" /></dd>
	<dt><label for="email">Email</label><span class="add-link" style="margin-left:219px" onclick="addField()">add</span></dt>
	<dd><input type="text" id="email" class="long-input" name="email" /></dd>
</dl>

<span> здесь - это ссылка-кнопочка при нажатии на к-рую будет добавляться еще одно поле ниже, т.е. я хочу добавлять еще один <dd>. Опыт в js совсем небольшой, поэтому не уверен как лучше это сделать. Появилась идея заюзать target, передавая в параметре event. Но в функцию попадет указатель на span, т.е. нужно вернутся на уровень выше, в dt. От него перейти к следующему соседу (dd), но не просто к следующему, а к последнему (вперед лепить нельзя, т.к. первое поле может уже быть заполнено), и после него добавить еще один dd. Можно ли такое замутить, и если можно то как? (На чистом js).

p.s. Если лень писать код, дайте хотя бы методы к-рые мне потребуются. Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 17.01.2011, 21:55
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,109

Сообщение от revvo
Но в функцию попадет указатель на span, т.е. нужно вернутся на уровень выше
Ссылка на родительский элемент хранится в

[ oElement = ] object.parentNode


revvo, я не совсем понял... Ты к одному ДТ хочешь приляпать несколько ДД?
Они же вроде парой ходят как крабы... Даже теперешнее их использование у тебя странно. Ну не похоже оно на "термины" и их "определения".
Ответить с цитированием
  #3 (permalink)  
Старый 17.01.2011, 23:24
Аспирант
Отправить личное сообщение для revvo Посмотреть профиль Найти все сообщения от revvo
 
Регистрация: 17.01.2011
Сообщений: 38

Вроде это же не запрещено (несколько <dd> определений к одному <dt> термину). А что не запрещено, то разрешено, тем более браузеры отображают без проблем

А почему я выбрал этот способ, они блочные элементы, а у меня в этой форме сложная верстка. С блочными удобно работать и обертки не нужны.

За ответ спасибо, буду копать. А как прилепить в нужное место dd? Если его просто тупо добавить к dl списку, то он в самый конец по идее пойдет. Можно ли сделать insert в нужное место?

P.S. Еще идея возникла передавать в функцию id <dd> элемента, но если динамически потом добавлять их, то он будет первым из них, а добавлять надо в конец...

Последний раз редактировалось revvo, 17.01.2011 в 23:28.
Ответить с цитированием
  #4 (permalink)  
Старый 18.01.2011, 01:33
Аспирант
Отправить личное сообщение для revvo Посмотреть профиль Найти все сообщения от revvo
 
Регистрация: 17.01.2011
Сообщений: 38

Написал я скрипт, в принципе делает что надо
function addField(event) {
			var x = event.target.parentNode;
			//var l = x.getElementByTagName('label'); //тут подвисает
			var y = x.nextSibling;
			while (y.nodeName == "DD" || y.nodeType == 3) y = y.nextSibling;
			var e = document.createElement('dd');
			e.innerHTML = '<input type="text" class="long-input" name="js-field" title="generated" />';
			y.parentNode.insertBefore(e, y);
		}

Но, захотел я получить текст из label, а тут облом. Не могу понять, почему-то подвисает в закомментированном месте.
Ответить с цитированием
  #5 (permalink)  
Старый 18.01.2011, 01:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,050

Добавьте красное
Сообщение от revvo
x.getElementByTagName('label')[0]
Ответить с цитированием
  #6 (permalink)  
Старый 18.01.2011, 09:36
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,109

Сообщение от revvo
А почему я выбрал этот способ, они блочные элементы
ДИВы например не менее блочны...
Сообщение от revvo
Можно ли сделать insert в нужное место?
Нужно таки правильно определиться с местом...
Сообщение от revvo
у меня в этой форме сложная верстка
Что-то мне подсказывает что выбраное тобой не соответствует твоей же задаче...

Альтернативный вариант разметки.

<div>
	<div>
		<p><label for="phone">Phone</label><span class="add-link" style="margin-left:213px" onclick="addField()">add</span></p>
		<div>
			<input type="text" id="phone" class="long-input" name="phone" />
		</div>
	</div>
	<div>
		<p><label for="email">Email</label><span class="add-link" style="margin-left:219px" onclick="addField()">add</span></p>
		<div>
			<input type="text" id="email" class="long-input" name="email" />
		</div>
	</div>
</div>


В моём варианте место добавления обозначено абсолютно четко.
Ответить с цитированием
  #7 (permalink)  
Старый 18.01.2011, 09:44
Аватар для Vulkan
Профессор
Отправить личное сообщение для Vulkan Посмотреть профиль Найти все сообщения от Vulkan
 
Регистрация: 25.05.2010
Сообщений: 511

Вот так правильно будет:
Сообщение от revvo Посмотреть сообщение
var l = x.getElementsByTagName('label')[0];
Ответить с цитированием
  #8 (permalink)  
Старый 18.01.2011, 12:04
Аспирант
Отправить личное сообщение для revvo Посмотреть профиль Найти все сообщения от revvo
 
Регистрация: 17.01.2011
Сообщений: 38

Цитата:
Что-то мне подсказывает что выбраное тобой не соответствует твоей же задаче...
Ок, давайте подумаем логически. Кроме семантики, какая разница что использовать? Один хрен это блоки всё. Кроме того, я даже вижу в этом плюс, там вокруг этого кода и так все дивами обложено, а так визуально легче находить эти инпуты.

Кстати придумал этот способ верстки форм не я, я это вычитал у кого-то. Там было нескольких способов, я немного подумал, и выбрал этот А вообще проблему решили блоки как таковые, а то у меня до этого разъезжалось всё, кто куда, в каждом браузере по своему.
И еще где-то вчера читал (перед выбором этого способа, я все же немного погуглил), что даже в W3C приведен пример использования dl списка не совсем по назначению, т.е. даже они ничего плохого в этом не видят.

В предложенном вами способе тоже вижу плюс, дополнительная обертка для пары лейбел-инпут, к-рая больше упорядочивает (недостаток у dl - это общий родитель у всех). Но переделывать я уже не буду
Ответить с цитированием
  #9 (permalink)  
Старый 18.01.2011, 16:41
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,109

Сообщение от revvo
Кроме семантики, какая разница что использовать?
А этого мало? Тогда можно добавить что я такое не одобряю...

Сообщение от revvo
Один хрен это блоки всё
Хрен-то один... Вот только размеры разные (с) Да и для браузера это таки разные хреновины...

Сообщение от revvo
так визуально легче находить эти инпуты
Некоторые люди для этого используют отступы и коментарии...

Сообщение от revvo
Но переделывать я уже не буду
Хозяин - барин...
Ответить с цитированием
  #10 (permalink)  
Старый 18.01.2011, 18:11
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Сообщение от revvo
Кроме семантики, какая разница что использовать?
У div-ов нет предопределённых стилей, влияющих на отображение, в отличие от dl/dt/dd.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получить доступ к элементу полученному через ajax Neokortex jQuery 10 14.01.2011 16:27
Получить доступ к объекту Ext.Window из внутреннего HTML-контейнера vittaliy ExtJS 0 07.01.2011 11:13
Как в jQuery получить доступ к фрейму или самому верхнему окну? Neokortex jQuery 7 20.12.2010 10:38
Получить доступ к элементу соседнего фрейма sniffysko jQuery 3 09.11.2009 13:17
Как получить доступ к ссылкам в iframe с помощью js Gratt Общие вопросы Javascript 4 01.09.2009 21:17