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

Как склонировать скопировать элемент на странице 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.

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

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






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