Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Получить доступ к "почти соседнему" элементу через target (https://javascript.ru/forum/misc/14455-poluchit-dostup-k-pochti-sosednemu-ehlementu-cherez-target.html)

revvo 17.01.2011 17:51

Получить доступ к "почти соседнему" элементу через 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. Если лень писать код, дайте хотя бы методы к-рые мне потребуются. Спасибо.

ksa 17.01.2011 21:55

Цитата:

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

Ссылка на родительский элемент хранится в

[ oElement = ] object.parentNode


revvo, я не совсем понял... Ты к одному ДТ хочешь приляпать несколько ДД?
Они же вроде парой ходят как крабы... Даже теперешнее их использование у тебя странно. Ну не похоже оно на "термины" и их "определения". :)

revvo 17.01.2011 23:24

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

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

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

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

revvo 18.01.2011 01:33

Написал я скрипт, в принципе делает что надо
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, а тут облом. Не могу понять, почему-то подвисает в закомментированном месте.

рони 18.01.2011 01:55

Добавьте красное
Цитата:

Сообщение от revvo
x.getElementByTagName('label')[0]


ksa 18.01.2011 09:36

Цитата:

Сообщение от revvo
А почему я выбрал этот способ, они блочные элементы

ДИВы например не менее блочны... :D
Цитата:

Сообщение от 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>


В моём варианте место добавления обозначено абсолютно четко.

Vulkan 18.01.2011 09:44

Вот так правильно будет:
Цитата:

Сообщение от revvo (Сообщение 88409)
var l = x.getElementsByTagName('label')[0];


revvo 18.01.2011 12:04

Цитата:

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

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

В предложенном вами способе тоже вижу плюс, дополнительная обертка для пары лейбел-инпут, к-рая больше упорядочивает (недостаток у dl - это общий родитель у всех). Но переделывать я уже не буду :)

ksa 18.01.2011 16:41

Цитата:

Сообщение от revvo
Кроме семантики, какая разница что использовать?

А этого мало? :D Тогда можно добавить что я такое не одобряю... :lol:

Цитата:

Сообщение от revvo
Один хрен это блоки всё

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

Цитата:

Сообщение от revvo
так визуально легче находить эти инпуты

Некоторые люди для этого используют отступы и коментарии... ;)

Цитата:

Сообщение от revvo
Но переделывать я уже не буду

Хозяин - барин...

Kolyaj 18.01.2011 18:11

Цитата:

Сообщение от revvo
Кроме семантики, какая разница что использовать?

У div-ов нет предопределённых стилей, влияющих на отображение, в отличие от dl/dt/dd.


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