VPF::jQ: Обернуть input в контейнер - Форум программистов

InfMag

Дата 13.8.2009, 16:32 (ссылка)

(нет голосов)

Загрузка ...

…

Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 21.11.2004

Репутация: 2
Всего: 4

Бодрого времени суток! У меня возникла некая загвоздка...
В общем мне нужно пофиксить определённые input-ы, а точнее через jQuery поставить перед каждым и после каждого инпута определённый код, например обернуть input в div-ы. Я не знаю как мне это рационально сделать, условие такое что сам html код трогать нельзя.

unicross

Дата 13.8.2009, 17:28 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 422
Регистрация: 15.6.2008

Репутация: 6
Всего: 53

Цитата(InfMag @ 13.8.2009, 17:32

)

условие такое что сам html код трогать нельзя.

Цитата(InfMag @ 13.8.2009, 17:32

)

перед каждым

before()

Цитата(InfMag @ 13.8.2009, 17:32

)

после каждого

after()

Цитата(InfMag @ 13.8.2009, 17:32

)

обернуть input в div-ы.

wrap()

Код


$(":input").wrap("<div></div>");

InfMag

Дата 13.8.2009, 17:37 (ссылка)

(нет голосов)

Загрузка ...

…

Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 21.11.2004

Репутация: 2
Всего: 4

unicross, спасибо, как-то даже недодумался.

InfMag

Дата 14.8.2009, 13:35 (ссылка)

(нет голосов)

Загрузка ...

…

Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 21.11.2004

Репутация: 2
Всего: 4

Возникла проблема, использую before & after. Вот имею такой инпут:

Код


<div class="styledform">
...
<input type="text"  class="inputtext"  name="form_text_1" value="" size="50" />
...
</div>

И сам обработчик:

Код


$(".styledform input").each(
    function (i) {
        if (this.type=="text")
        {
            this.className = "sform_input-text";
            $(this).before('<table class="sform_input-text"><tr><td width="8"><img src="'+SITE_TEMPLATE_PATH+'/images/inputs/input-text_l.png" style="width:8px;height:27px;" class="iePNG" /></td><td>').after('</td><td width="8"><img src="'+SITE_TEMPLATE_PATH+'/images/inputs/input-text_r.png" style="width:8px;height:27px;" class="iePNG" /></td></tr></table>');
        }
    }
);

Трабл в том, что после before-а не закрытые теги закрываются сами и получается в выводе уже такой вот код: (получил код выделенного фрагмента в ff)

Код


<table class="sform_input-text"><tbody><tr><td width="8"><img src="/bitrix/templates/ufms86/images/inputs/input-text_l.png" style="width: 8px; height: 27px;" class="iePNG"></td><td></td></tr></tbody></table><input class="sform_input-text" name="form_text_1" value="" size="50" type="text"><img src="/bitrix/templates/ufms86/images/inputs/input-text_r.png" style="width: 8px; height: 27px;" class="iePNG"></td></tr>

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

unicross

Дата 14.8.2009, 15:48 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 422
Регистрация: 15.6.2008

Репутация: 6
Всего: 53

Цитата(InfMag @ 14.8.2009, 14:35

)

использую before & after. Вот имею такой инпут:

То что они закрывают все незакрытые теги это нормально. Для вложения предназначен метод wrap().

Можно попробовать так:

Код


            this.className = "sform_input-text";
            $(this).wrap("<div id='div1'></div>");
            var elem = $("#div1").html();
            $("#div1").replaceWith('<table class="sform_input-text"><tr><td width="8"><img src="'+SITE_TEMPLATE_PATH+'/images/inputs/input-text_l.png" style="width:8px;height:27px;" class="iePNG" /></td><td>' + elem + '</td><td width="8"><img src="'+SITE_TEMPLATE_PATH+'/images/inputs/input-text_r.png" style="width:8px;height:27px;" class="iePNG" /></td></tr></table>');

Это сообщение отредактировал(а) unicross - 14.8.2009, 16:13

InfMag

Дата 14.8.2009, 16:15 (ссылка)

(нет голосов)

Загрузка ...

…

Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 21.11.2004

Репутация: 2
Всего: 4

unicross, и как тут в данном случае применить wrap()? Я пытался весь код заключить во wrap(), но результат был нулевым, никак не отреагировал элемент:

Код


$(this).wrap('<table class="sform_input-text"><tr><td width="8"><img src="'+SITE_TEMPLATE_PATH+'/images/inputs/input-text_l.png" style="width:8px;height:27px;" class="iePNG" /></td><td></td><td width="8"><img src="'+SITE_TEMPLATE_PATH+'/images/inputs/input-text_r.png" style="width:8px;height:27px;" class="iePNG" /></td></tr></table>');

Может есть вариант получить HTML код самого элемента?

unicross

Дата 14.8.2009, 16:20 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 422
Регистрация: 15.6.2008

Репутация: 6
Всего: 53

Цитата(InfMag @ 14.8.2009, 17:15

)

Может есть вариант получить HTML код самого элемента?

См. пример выше...

Или более простой способ:

Код


$(this).after('<table class="sform_input-text"><tr><td width="8"><img src="'+SITE_TEMPLATE_PATH+'/images/inputs/input-text_l.png" style="width:8px;height:27px;" class="iePNG" /></td><td id="td_' + i + '"></td><td width="8"><img src="'+SITE_TEMPLATE_PATH+'/images/inputs/input-text_r.png" style="width:8px;height:27px;" class="iePNG" /></td></tr></table>');
$("#td_" + i).append($(this));

Это сообщение отредактировал(а) unicross - 14.8.2009, 16:52

InfMag

Дата 15.8.2009, 18:10 (ссылка)

(нет голосов)

Загрузка ...

…

Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 21.11.2004

Репутация: 2
Всего: 4

unicross, спасибо! Первый вариант оказался предпочтительнее.

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »