|
|
|
append в jQuery
|
|||
|---|---|---|---|
|
#18+
Имеется коллекция элементов оЙгукн. Коллекция встраивается в DOM. Нужно, чтобы при добавлении элемента в коллекцию, он бы добавлялся к оставшимся элементам в DOM. Делаю так: Код: javascript 1. 2. 3. 4. 5. Вопрос. Что происходит, когда аппендится один и тот же объект? Удаляется из DOMa старый, и записывается новый такой же. Или существующие объекты не затрагиваются? ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 12.10.2012, 22:04:04 |
|
||
|
append в jQuery
|
|||
|---|---|---|---|
|
#18+
Shitbox2, автор=Shitbox2Вопрос. Что происходит, когда аппендится один и тот же объект? Удаляется из DOMa старый, и записывается новый такой же. Или существующие объекты не затрагиваются? Ничего не удаляется, записывается новый такой же. Задача в итоге у вас какая? Коллекция зачем? Обычно делают так: Код: javascript 1. 2. 3. 4. 5. 6. ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 15.10.2012, 12:11:17 |
|
||
|
append в jQuery
|
|||
|---|---|---|---|
|
#18+
в последней строке кавычки не забыты? ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 15.10.2012, 12:15:46 |
|
||
|
append в jQuery
|
|||
|---|---|---|---|
|
#18+
Паганель, забыты в средних... копировал ТС. ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 15.10.2012, 12:34:54 |
|
||
|
append в jQuery
|
|||
|---|---|---|---|
|
#18+
mage.lanкопировал ТС.это я у него спрашивал :) ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 15.10.2012, 12:35:57 |
|
||
|
append в jQuery
|
|||
|---|---|---|---|
|
#18+
Забыты, конечно) А, вообще, задача сделать динамический список с полями ввода (примерно как редактор контактной информации в Г+) Код: javascript 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. Только немного сложнее. Например, нужно, чтобы у единственного поля с отмеченным чекбоксом пропадала кнопка удаления. Или определенные поля блокировались в зависимости от значения в других. Т.е. каждое поле должно быть объектом со своими методами, который можно было бы легко найти по определенным параметрам. ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 17.10.2012, 19:20:25 |
|
||
|
append в jQuery
|
|||
|---|---|---|---|
|
#18+
Shitbox2, по вашему коду: Код: javascript 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. Я пока не увидел, зачем там нужна была коллекция, всю логику можно сделать на DOM, есть функция data() если не хватает каких-то данных на тегах, то их можно добавить. ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 17.10.2012, 20:01:51 |
|
||
|
append в jQuery
|
|||
|---|---|---|---|
|
#18+
А почему нельзя 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>' }) Вот как этот кусок лучше сделать, пока не допираю ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 17.10.2012, 22:08:10 |
|
||
|
append в jQuery
|
|||
|---|---|---|---|
|
#18+
Shitbox2Например, нужно, чтобы у единственного поля с отмеченным чекбоксом пропадала кнопка удаления. Или определенные поля блокировались в зависимости от значения в других. Т.е. каждое поле должно быть объектом со своими методами, который можно было бы легко найти по определенным параметрам.может, и не в тему, просто почему-то вспомнилось: http://www.youtube.com/watch?v=DnhGqcKEPiM ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 17.10.2012, 22:29:46 |
|
||
|
append в jQuery
|
|||
|---|---|---|---|
|
#18+
Ага, тоже смотрел в сторону фреймворков. Пока не знаю, что лучше Knockout, Backbone или Ember. Все найденные холивары 2011 года, могло поменяться многое. Пока не могу спрогнозировать какой из них станет стандартом (как JQ). Может рано еще и стоит пописать на чистом JQ? ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 18.10.2012, 10:06:59 |
|
||
|
append в jQuery
|
|||
|---|---|---|---|
|
#18+
Shitbox2, bind, live - устарели и давно, с предыдущей версии jQuery on/off заменяет их полностью. ну я бы в вашем случае так и делал, как вы хотите. допустим #control - управляющий элемент, строите некий объект-замыкание Код: javascript 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. Вызываете его как-то так: Код: javascript 1. 2. 3. 4. 5. 6. 7. 8. Функции в JSON не хорошо пихать, просто я вам показываю, что это реально. Обычно это дырка в безопасности. Если хорошо подумать, то можно написать такое замыкание, которое будет всю логику держать в себе, а оперировать только селекторами, которые вы ей засунете при рождении. Если я что-то непонятно объяснил, спрашивайте... ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 18.10.2012, 11:49:08 |
|
||
|
append в jQuery
|
|||
|---|---|---|---|
|
#18+
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. Тут в строке this.$selector = this.$element.find('input.linegen') почему-то не работает find. Так же пока не очень разобрался, как работает .on и .off и как лучше создавать новый элемент Кстати, сделать все функции внутри запросто, т.к. манипуляции с элементами будут одни и те же (удаление, вставка, блокировка), только DOM будет разным. Но тут можно значимые элементы помечать классами или атрибутами (как обычно делается), а потом просто искать по ним. ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 18.10.2012, 14:12:40 |
|
||
|
append в jQuery
|
|||
|---|---|---|---|
|
#18+
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 с указанного события, в том случае, когда вы вешаете и удаляете именно свое событие. ну логику построения объекта Вам самому придумывать, вы же программист. ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 18.10.2012, 17:23:19 |
|
||
|
append в jQuery
|
|||
|---|---|---|---|
|
#18+
Осталась еще проблема. Когда нужно добавлять новые элементы Код: javascript 1. 2. 3. 4. 5. 6. 7. 8. 9. Таким образом естественно ничего не добавляется, а элемент просто перезаписывается. Можно поступить иначе: Код: javascript 1. 2. 3. 4. 5. Но тут приходится каждый раз искать элемент с помощью $, что не хорошо. Можно клонировать элемент: Код: javascript 1. 2. 3. 4. 5. Пока лучшее, что приходит в голову. Но как потом искать клонированный объект JQ? Пока придумал сохранять клоны в массиве: Код: javascript 1. 2. 3. 4. 5. 6. Есть подозрение, что JQ сразу сохраняет клоны в каком-то внутреннем массиве, к которому можно обращаться. Но пока никаких сведений по этому поводу не нашел. ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 19.10.2012, 12:17:45 |
|
||
|
append в jQuery
|
|||
|---|---|---|---|
|
#18+
Как работает appendTo в JQ, если добавляется коллекция элементов? Каждый элемент по отдельности в DOM вставляется или все разом? ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 20.10.2012, 14:54:09 |
|
||
|
append в jQuery
|
|||
|---|---|---|---|
|
#18+
Интересно, как вы себе представляете "все разом", например? Есть лишь один способ, и он ни в одном браузере не работает и никогда не будет работать. ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 20.10.2012, 16:23:18 |
|
||
|
append в jQuery
|
|||
|---|---|---|---|
|
#18+
Shitbox2Есть подозрение, что JQ сразу сохраняет клоны в каком-то внутреннем массиве, к которому можно обращаться. Но пока никаких сведений по этому поводу не нашел.Есть подозрение, что вы вообще не читали документацию. clone() возвращает ссылку как раз на массив клонов. ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 20.10.2012, 16:26:46 |
|
||
|
append в jQuery
|
|||
|---|---|---|---|
|
#18+
AntonariyИнтересно, как вы себе представляете "все разом", например? Есть лишь один способ, и он ни в одном браузере не работает и никогда не будет работать.Под "все разом" можно понимать добавление элементов в живой DOM. Решается через DocumentFragment или оторванный от DOM контейнер. Думаю в jQuery используется первое. Чтобы убедиться, можно глянуть исходники. ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 20.10.2012, 16:42:16 |
|
||
|
append в jQuery
|
|||
|---|---|---|---|
|
#18+
Все разом... Как-то так представляю: $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 не имеет подходящих методов. Как обычно поступают? ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 20.10.2012, 16:53:03 |
|
||
|
append в jQuery
|
|||
|---|---|---|---|
|
#18+
Я имел ввиду, что всё разом — это замена коллекции. Даже DocumentFragment и оторванный контейнер внутри dom работают с существующей коллекцией, поэтому единственная разница между каждым по отдельности и доступными вариантами "всего сразу", это скорость. Причем разница заметна на глаз будет лишь на крупных html-простынях. ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 20.10.2012, 16:57:19 |
|
||
|
append в jQuery
|
|||
|---|---|---|---|
|
#18+
Shitbox2Про массив клонов ничего не нашел, где написано?Как всегда, на сайте производителя When using the .clone() method, you can modify the cloned elements or their contents before (re-)inserting them into the document. ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 20.10.2012, 17:01:05 |
|
||
|
append в jQuery
|
|||
|---|---|---|---|
|
#18+
Тут сказано, что можно изменять клонированный элемент, что логично. Но не слова про массив клонов. Такая строчка: console.log($('<p>абв</p>').clone().clone().clone()) Выведет [<p>абв</p>], а не [<p>абв</p>,<p>абв</p>,<p>абв</p>] ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 20.10.2012, 17:43:59 |
|
||
|
append в jQuery
|
|||
|---|---|---|---|
|
#18+
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(). ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 20.10.2012, 19:12:17 |
|
||
|
append в jQuery
|
|||
|---|---|---|---|
|
#18+
AntonariyЯ имел ввиду, что всё разом — это замена коллекции. Даже DocumentFragment и оторванный контейнер внутри dom работают с существующей коллекцией, поэтому единственная разница между каждым по отдельности и доступными вариантами "всего сразу", это скорость. Причем разница заметна на глаз будет лишь на крупных html-простынях.В десктопных браузерах разницу фиг заметишь, это да. А вот на мобильнике у меня создание таблицы 10x10 в живом DOM в Opera Mobile заняло больше секунды, тогда как при помощи DocumentFragment в районе 100 миллисекунд и меньше. Так что не стоит недооценивать пользу DocumentFragment :) ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 20.10.2012, 20:02:46 |
|
||
|
append в jQuery
|
|||
|---|---|---|---|
|
#18+
К сожалению $('<p>абв</p><p>абв</p>').clone() не покатит, т.к. <p>абв</p> должны быть отдельными объектами JQ в моем случае. А чем DocumentFragment отличается от 7-го пункта этой статьи http://habrahabr.ru/post/63797/ ? Или это одно и то же? ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 20.10.2012, 23:04:21 |
|
||
|
|

start [/forum/topic.php?fid=22&msg=38006912&tid=1449198]: |
0ms |
get settings: |
5ms |
get forum list: |
11ms |
check forum access: |
2ms |
check topic access: |
2ms |
track hit: |
53ms |
get topic data: |
7ms |
get forum data: |
2ms |
get page messages: |
50ms |
get tp. blocked users: |
1ms |
| others: | 200ms |
| total: | 333ms |

| 0 / 0 |
