голосование
BASH
PHP
Javascript
HTML
Программы
Firebird
Майнинг
PostgreSQL
Хостинг
Железо
Ресурсы
GIT
SEO
Oracle
Python
Мобильные технологии
Ремонт
Mercurial
Заработок на сайте
Docker
Проголосуйте за категорию!
счётчик
Яндекс.Метрика

Как склонировать скопировать элемент на странице jquery

Очень часто нужно клонировать скопировать элемент на странице. Тут 2 способа: с нуля собрать новый объект по аналогии, клонировать объект. Если внутри объекта много элементов, то собрать второй такой же элемент займет много времени. Клонирование как способ имеет преимущество. Функция clone() клонирует выбранный элемент. Вам потребуется небольшое количество кода.


<style>
  form { width: 300px; margin:10px; border: 1px solid gray; float: left !important;}
  input#plus { margin:10px; border: 1px solid green; float: left !important;}
  input#send { margin:10px; border: 1px solid green; float: left !important;}
  input#input-text { margin:10px; border: 1px solid gray; float: left !important; }
  #box-input { width: 300px; float: left !important; }
  #box-buttom { width: 300px; float: left !important; }
</style>  
<form name="test" method="get" action="api.php">
    <div id="box-input">
        <input type="text" name="input" value="" placeholder="Введите текст в поле" id="input-text"><br>
    </div>    
    <div id="box-buttom">
        <input type="submit" name="plus" value="добавить поле" id="plus">
        <input type="submit" value="отправить" id="send">
    </div>
</form>

var i=0;
var q=0;
$("#plus").click(function(){      
      $("#input-text").clone(true).attr('name', function(){
          i++;       
          return 'input' + i;
          }).attr('placeholder', function(){
          q++;        
          return 'Введите текст в поле ' + q;
          }).insertAfter($("#input-text"));           
        return false;
});

При нажатии на кнопку будет скопировано поле и вставлено перед первым полем. Вы можете много раз нажать на кнопку и клонирование будет работать. Поля placeholder и name будут меняться. При клонировании можно применить массу анонимных функций. Благодаря им вы можете менять данные в свойствах элементов.

Существуют несколько способов добавления элементов на страницу: клонирование, append, prepend. Про работу функции append и prepend читайте на странице как вставить элементы в блок div jQuery.

просмотры: 1415, уровень: лёгкий уровень, рейтинг: 0, дата: 2015-12-26 09:51:15
проголосовать:

Комментарии:






поиск
реклама
банеры
Мы предлагаем в аренду VPS серверы с выделенным IP-адресом, которые полностью эмулируют физический сервер.
http://trainingweb.ru/redirect/well_web_vps_kvm Аренда VPS KVM в Европе Мы предлагаем в аренду VPS серверы с выделенным IP-адресом, которые полностью эмулируют физический сервер.
http://trainingweb.ru/redirect/domains домен RU домен RU всего за 99 рублей
http://trainingweb.ru/redirect/pingadmin мониторинг сайтов сервис мониторинга работы сайта, мониторим HTTP, HTTPS, FTP, MYSQL, PostgreSQL, POP3, SMTP, IMAP