powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / append в jQuery
25 сообщений из 48, страница 1 из 2
append в jQuery
    #37996506
Shitbox2
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Имеется коллекция элементов оЙгукн. Коллекция встраивается в DOM. Нужно, чтобы при добавлении элемента в коллекцию, он бы добавлялся к оставшимся элементам в DOM.

Делаю так:
Код: javascript
1.
2.
3.
4.
5.
var $coll = $(<p>коллекция</p>)
$('div').append($coll)

//Добавляется элемент в коллекцию и сразу встраивается в  DOM
$('div').append($coll.add($(<p>добавка</p>)))


Вопрос. Что происходит, когда аппендится один и тот же объект? Удаляется из DOMa старый, и записывается новый такой же. Или существующие объекты не затрагиваются?
...
Рейтинг: 0 / 0
append в jQuery
    #37998274
mage.lan
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Shitbox2,
автор=Shitbox2Вопрос. Что происходит, когда аппендится один и тот же объект? Удаляется из DOMa старый, и записывается новый такой же. Или существующие объекты не затрагиваются?
Ничего не удаляется, записывается новый такой же.

Задача в итоге у вас какая?
Коллекция зачем?

Обычно делают так:

Код: javascript
1.
2.
3.
4.
5.
6.
var divs = $('div');

$(<p>коллекция</p>).appendTo( divs );
$(<p>добавка</p>).appendTo( divs );

var col = $(divs.get(0)).find('p');
...
Рейтинг: 0 / 0
append в jQuery
    #37998290
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
в последней строке кавычки не забыты?
...
Рейтинг: 0 / 0
append в jQuery
    #37998334
mage.lan
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Паганель,

забыты в средних... копировал ТС.
...
Рейтинг: 0 / 0
append в jQuery
    #37998338
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
mage.lanкопировал ТС.это я у него спрашивал :)
...
Рейтинг: 0 / 0
append в jQuery
    #38003229
Shitbox2
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Забыты, конечно)

А, вообще, задача сделать динамический список с полями ввода (примерно как редактор контактной информации в Г+)
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
$(document).ready(function() {

	addNew = function () {
	$('<div><input type="checkbox"></input><input type="text"></input><a href="#" data-action="close" style="text-decoration: none;">&#215;</a></div>').appendTo('#cont')
		.bind('keydown', function(e) {
			if ($(e.target).val() == '') {
				addNew()
			}
		})
		.bind('click', function(e) {
			if ($(e.target).filter('[data-action="close"]').length != 0) {
				$(e.target).parent().remove()
			}			
		})
	}
	
	addNew()
});


Только немного сложнее. Например, нужно, чтобы у единственного поля с отмеченным чекбоксом пропадала кнопка удаления. Или определенные поля блокировались в зависимости от значения в других. Т.е. каждое поле должно быть объектом со своими методами, который можно было бы легко найти по определенным параметрам.
...
Рейтинг: 0 / 0
append в jQuery
    #38003275
mage.lan
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Shitbox2,

по вашему коду:
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
var addNew = function () {
// убираем функцию из window
	$('<div><input type="checkbox" /><input type="text" /><a href="#" data-action="close" style="text-decoration: none;">&#215;</a></div>').appendTo('#cont')
//  инпуты свернуть, лучше меньше тегов, стили убрать
		.on({
                    'keydown': function(e) {
// не пользуйтесь ни bind ни live ни delegate, пользуйтесь только on или алиасами click, mousedown и прочими
			if ($(e.target).val() === '') {
// не пользуйтесь == это плохой оператор, если почитаете стандарт, то у вас тихо поедет крыша, о том как он там работает
				addNew()
			}
                    },
		    'click': function(e) {
			if ($(e.target).filter('[data-action="close"]').size()) {
// а вдруг это будет не массив? проверять на ноль можно и так.
				$(e.target).parent().remove()
			}			
		    }
                });
	}



Я пока не увидел, зачем там нужна была коллекция, всю логику можно сделать на DOM, есть функция data() если не хватает каких-то данных на тегах, то их можно добавить.
...
Рейтинг: 0 / 0
append в jQuery
    #38003361
Shitbox2
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
А почему нельзя bind, live и delegate? Устарели?

У меня сейчас как раз вся логика на DOM, но как-то слишком запутанно. Получается что-то вроде:
$('#cont input[checked="checked"]').parent().find('a.close').hide()

Т.е. найдя нужный элемент, приходится перемещаться по DOMу его родителя и т.д. И проблема как раз в том сейчас, что эту логику нужно применить к разным спискам с совершенно разной структурой. Т.е. все-таки нужны методы. Что-то типа:

$('#cont input[checked="checked"]').closeitem()

Причем, чекбокс может оказаться совсем в другом месте или даже не чекбоксом. Получится:

$('#cont').checked().closeitem()

Данные же о шаблоне логично передавать в какую-то основную функцию в виде параметров:

itm[] = new Item ({
dragable: true,
editable: true,
tpl: '<div><input type="checkbox"><input type="text" data="itemGen"><a data="close">×</a></div>'
})

Вот как этот кусок лучше сделать, пока не допираю
...
Рейтинг: 0 / 0
append в jQuery
    #38003375
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Shitbox2Например, нужно, чтобы у единственного поля с отмеченным чекбоксом пропадала кнопка удаления. Или определенные поля блокировались в зависимости от значения в других. Т.е. каждое поле должно быть объектом со своими методами, который можно было бы легко найти по определенным параметрам.может, и не в тему, просто почему-то вспомнилось:
http://www.youtube.com/watch?v=DnhGqcKEPiM
...
Рейтинг: 0 / 0
append в jQuery
    #38003698
Shitbox2
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Ага, тоже смотрел в сторону фреймворков. Пока не знаю, что лучше Knockout, Backbone или Ember. Все найденные холивары 2011 года, могло поменяться многое.

Пока не могу спрогнозировать какой из них станет стандартом (как JQ). Может рано еще и стоит пописать на чистом JQ?
...
Рейтинг: 0 / 0
append в jQuery
    #38003894
mage.lan
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Shitbox2,

bind, live - устарели и давно, с предыдущей версии jQuery on/off заменяет их полностью.

ну я бы в вашем случае так и делал, как вы хотите.
допустим #control - управляющий элемент, строите некий объект-замыкание
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
function myControl( selector, options ){
   var defaults = {
      // настройки по умолчанию
   }
   this.options = $.extend( {}, defaults, options );
   $(selector).on( 'change', function(e)(
       if( this.options.change ) this.options.change(e, this.options)
   });
// по идее тут описываем все, что относится к вашему отдельно взятому контролу.
}


Вызываете его как-то так:
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
new myControl( '#control', {
dragable: true,
editable: true,
change: function(e, opt){
console.log(opt);
// любые манипуляции с DOM
}
});


Функции в JSON не хорошо пихать, просто я вам показываю, что это реально. Обычно это дырка в безопасности.
Если хорошо подумать, то можно написать такое замыкание, которое будет всю логику держать в себе, а оперировать только селекторами, которые вы ей засунете при рождении.

Если я что-то непонятно объяснил, спрашивайте...
...
Рейтинг: 0 / 0
append в jQuery
    #38004225
Shitbox2
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
mage.lan, в Бутстрапе подобным образом делается. Как раз пробовал слизать с него, но завис. Это был бы самый лучший вариант, т.к. в проекте используется Бутстрап. Пока получилось следующее:

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
$(document).ready(function() {
	$('#cont').newline({description:'ля-ля'});
});

!function ($) {

  "use strict"; // jshint ;_;


 /* NEWLINE PUBLIC CLASS DEFINITION
  * =============================== */

  var Newline = function (element, options) {
    this.init('newline', element, options)
  }

  Newline.prototype = {

    constructor: Newline

  , init: function (type, element, options) {

      this.type = type
      this.$element = $(element)
      this.$selector = this.$element.find('input.linegen')
      this.options = $.extend({}, $.fn.newline.defaults, options)	
  
      this.line().appendTo(this.$element).find('input.linegen').val(this.options.description)

      this.$selector.on( 'change', function(e){
          console.log("...");
          //if( this.options.change ) this.options.change(e, this.options)
      })
	  
    }
	
  , line: function () {
      return this.$line = this.$line || $(this.options.template)
    }

  , destroy: function () {
      //this.hide().$element.off('.' + this.type).removeData(this.type)
    }

  }


 /* NEWLINE PLUGIN DEFINITION
  * ========================= */

  $.fn.newline = function ( option ) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('newline')
        , options = typeof option == 'object' && option
      if (!data) $this.data('newline', (data = new Newline(this, options)))
      if (typeof option == 'string') data[option]()
    })
  }

  $.fn.newline.Constructor = Newline

  $.fn.newline.defaults = {
    dragable: false
  , editable: true
  , description: ''
  , template: '<div class="newline"><input type="checkbox" class="flag"><input type="text" class="linegen"></input></div>'
  , data: ''
  }

}(window.jQuery);



Тут в строке this.$selector = this.$element.find('input.linegen') почему-то не работает find. Так же пока не очень разобрался, как работает .on и .off и как лучше создавать новый элемент

Кстати, сделать все функции внутри запросто, т.к. манипуляции с элементами будут одни и те же (удаление, вставка, блокировка), только DOM будет разным. Но тут можно значимые элементы помечать классами или атрибутами (как обычно делается), а потом просто искать по ним.
...
Рейтинг: 0 / 0
append в jQuery
    #38004681
mage.lan
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Shitbox2,

если не работает find, значит, он не может ничего найти.
Вы, похоже, пытаетесь найти инпут, раньше, чем его создали. собственно это легко проверить, если вы напишете
console.log(this.$element.html()) перед вызовом find

el.on('event', function(){}) - работает как el.bind('event', function(){})
parentEl.on('event', 'selector', function(){}) - работает как $('selector').live('event', functin(){}), где parentEl - выступает как элемент который всегда есть на странице, в худшем варианте это $('body'), как было у live по умолчанию.
в качестве первого параметра можно передавать объект состоящий из имен событий и их обработчиков, например
el.on({
'keyup' : function(){},
'keydown' : function(){},
'keypress' : function(){}
});
что удобно в случае ели вам надо навесить более однго события.

функция off совсем примитивна:
el.off() - так писать не надо, снимает все обработчики событий
el.off('event') - снимает все обработчики событий для данного события.
parentEl.off('event', 'selector' ) - аналог устаревшего die(), думаю вам пока не понадобится
el.off('event', funcName) - снимает обработчик funcName с указанного события, в том случае, когда вы вешаете и удаляете именно свое событие.

ну логику построения объекта Вам самому придумывать, вы же программист.
...
Рейтинг: 0 / 0
append в jQuery
    #38005574
Shitbox2
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Осталась еще проблема.
Когда нужно добавлять новые элементы
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
  , init: function (type, element, options) {  
          this.$element = $(element)
	  this.line().appendTo(this.$element).find('input.linegen').val(this.options.description)
	  this.line().appendTo(this.$element).find('input.linegen').val(this.options.description)	  
    }
	
  , line: function () {
      return this.$line = this.$line || $(this.options.template)
    }


Таким образом естественно ничего не добавляется, а элемент просто перезаписывается. Можно поступить иначе:
Код: javascript
1.
2.
3.
4.
5.
  , init: function (type, element, options) {  
          this.$element = $(element)
	  $(this.options.template).appendTo(this.$element).find('input.linegen').val(this.options.description)
	  $(this.options.template).appendTo(this.$element).find('input.linegen').val(this.options.description)	  
    }


Но тут приходится каждый раз искать элемент с помощью $, что не хорошо.
Можно клонировать элемент:
Код: javascript
1.
2.
3.
4.
5.
  , init: function (type, element, options) {  
          this.$element = $(element)
	  this.line().clone().appendTo(this.$element).find('input.linegen').val(this.options.description)
	  this.line().clone().appendTo(this.$element).find('input.linegen').val(this.options.description)	  
    }


Пока лучшее, что приходит в голову. Но как потом искать клонированный объект JQ? Пока придумал сохранять клоны в массиве:
Код: javascript
1.
2.
3.
4.
5.
6.
  , init: function (type, element, options) {  
          this.$element = $(element)
          this.linearr = []
	  this.linearr[] = this.line().clone().appendTo(this.$element).find('input.linegen').val(this.options.description)
	  this.linearr[] = this.line().clone().appendTo(this.$element).find('input.linegen').val(this.options.description)	  
    }


Есть подозрение, что JQ сразу сохраняет клоны в каком-то внутреннем массиве, к которому можно обращаться. Но пока никаких сведений по этому поводу не нашел.
...
Рейтинг: 0 / 0
append в jQuery
    #38006681
Shitbox2
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Как работает appendTo в JQ, если добавляется коллекция элементов? Каждый элемент по отдельности в DOM вставляется или все разом?
...
Рейтинг: 0 / 0
append в jQuery
    #38006707
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Интересно, как вы себе представляете "все разом", например? Есть лишь один способ, и он ни в одном браузере не работает и никогда не будет работать.
...
Рейтинг: 0 / 0
append в jQuery
    #38006709
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Shitbox2Есть подозрение, что JQ сразу сохраняет клоны в каком-то внутреннем массиве, к которому можно обращаться. Но пока никаких сведений по этому поводу не нашел.Есть подозрение, что вы вообще не читали документацию. clone() возвращает ссылку как раз на массив клонов.
...
Рейтинг: 0 / 0
append в jQuery
    #38006715
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
AntonariyИнтересно, как вы себе представляете "все разом", например? Есть лишь один способ, и он ни в одном браузере не работает и никогда не будет работать.Под "все разом" можно понимать добавление элементов в живой DOM. Решается через DocumentFragment или оторванный от DOM контейнер. Думаю в jQuery используется первое. Чтобы убедиться, можно глянуть исходники.
...
Рейтинг: 0 / 0
append в jQuery
    #38006722
Shitbox2
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Все разом... Как-то так представляю:
$coll = $coll.add($item.clone()).add($item.clone()).add($item.clone());
$coll.appendTo(this.$element)

Про массив клонов ничего не нашел, где написано?

----

Еще вопрос, чуть по-другой теме.
Есть список элементов (которые как раз расклонированы по образцу) с разными параметрами input.value, editable и т.п. Их можно сортировать с помощью функции JQ-UI Sortable. В итоге на сервер нужно отправить порядок следования элементов и параметры каждого. Тут вижу два пути:
1. Записать все параметры в DOM как data-атрибуты, а при сохранении проходить по DOMу и сохранять их в порядке следования элементов в JSON
2. Записать все параметры в свойство data JQ-объекта каждого элемента. Но при сохранении мучиться с записью порядка следования элементов, записью id-атрибутов и т.п. т.к. ф-ия sortable не имеет подходящих методов.

Как обычно поступают?
...
Рейтинг: 0 / 0
append в jQuery
    #38006726
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Я имел ввиду, что всё разом — это замена коллекции. Даже DocumentFragment и оторванный контейнер внутри dom работают с существующей коллекцией, поэтому единственная разница между каждым по отдельности и доступными вариантами "всего сразу", это скорость. Причем разница заметна на глаз будет лишь на крупных html-простынях.
...
Рейтинг: 0 / 0
append в jQuery
    #38006728
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Shitbox2Про массив клонов ничего не нашел, где написано?Как всегда, на сайте производителя When using the .clone() method, you can modify the cloned elements or their contents before (re-)inserting them into the document.
...
Рейтинг: 0 / 0
append в jQuery
    #38006743
Shitbox2
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Тут сказано, что можно изменять клонированный элемент, что логично. Но не слова про массив клонов.
Такая строчка: console.log($('<p>абв</p>').clone().clone().clone())
Выведет [<p>абв</p>], а не [<p>абв</p>,<p>абв</p>,<p>абв</p>]
...
Рейтинг: 0 / 0
append в jQuery
    #38006779
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Shitbox2Тут сказано, что можно изменять клонированный элемент, что логично. Но не слова про массив клонов.
Такая строчка: console.log($('<p>абв</p>').clone().clone().clone())
Выведет [<p>абв</p>], а не [<p>абв</p>,<p>абв</p>,<p>абв</p>]Все правильно. Вернется последний клон. Я же имел ввиду, что $('<p>абв</p><p>абв</p>').clone() вернет массив из двух новых <p>.

В случае с .clone().clone() к предыдущим клонам возможно вернет .end().
...
Рейтинг: 0 / 0
append в jQuery
    #38006795
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
AntonariyЯ имел ввиду, что всё разом — это замена коллекции. Даже DocumentFragment и оторванный контейнер внутри dom работают с существующей коллекцией, поэтому единственная разница между каждым по отдельности и доступными вариантами "всего сразу", это скорость. Причем разница заметна на глаз будет лишь на крупных html-простынях.В десктопных браузерах разницу фиг заметишь, это да. А вот на мобильнике у меня создание таблицы 10x10 в живом DOM в Opera Mobile заняло больше секунды, тогда как при помощи DocumentFragment в районе 100 миллисекунд и меньше. Так что не стоит недооценивать пользу DocumentFragment :)
...
Рейтинг: 0 / 0
append в jQuery
    #38006912
Shitbox2
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
К сожалению $('<p>абв</p><p>абв</p>').clone() не покатит, т.к. <p>абв</p> должны быть отдельными объектами JQ в моем случае.

А чем DocumentFragment отличается от 7-го пункта этой статьи http://habrahabr.ru/post/63797/ ? Или это одно и то же?
...
Рейтинг: 0 / 0
25 сообщений из 48, страница 1 из 2
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / append в jQuery
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]