JQuery: методы $.add() и $.append() работают некорректно?

Question

[turbo_exe]

написал небольшой примерчик. он должен добавлять по клику на в него элемент . познакомился с jQuery недавно и работа конкретно этих функций $.add() и $.append() вызывает недоумение. вот вкратце код:

<style><br>
.div {<br>
	background-color: yellow;<br>
	width: 50pt;<br>
	height: 50pt;<br>
}<br>
</style><br>

<script type="text/javascript"><br>
	$("p #add").click(function() {<br>
		$(this).add("div").css("class", "div");<br>
	});<br>
	$("p #append").click(function() {<br>
		$(this).append("<div class='div'></div>");<br>
	});<br>
</script><br>

<p id="add">click me and i'll try to show you a div with $.add()</p><br>
<p id="append">click me and i'll try to show you a div with $.append()</p><br>

ссылки на API:

$.append()

$.add()



у меня при клике на в обоих случаях ничего не происходит. wtf?



полностью скачать и открыть test.html в браузере можно отсюда



UPD: код jQuery теперь:

$(document).ready(function(){<br>
	$("p#add").click(function() {<br>
		$(this).add("div").css("class", "div");<br>
	});<br>
	$("p#append").click(function() {<br>
		$(this).append("<div class='div'></div>");<br>
	});<br>
});<br>

$.append() заработал, $.add() — по прежнему нет

Answer 1

[Mithgol]

Как я понимаю, Вы желаете отыскать такой аналог вызова

$(function(){
   $("p#append").click(function(){
      $(this).append("<div class='div'></div>");
   });
});

который создавал бы элемент по имени и затем снабжал его классом, а потом присоединял бы к указанному.

Тогда это вот что:

$(function(){
   $("p#append").click(function(){
      $('<div />').addClass('div').appendTo($(this));
   });
});

Метод .add() не сгодится потому, что он используется для пополнения $-наборов. Например, его можно использовать, чтобы добавить два div-элемента вместо одного:

$(function(){
   $("p#append").click(function(){
      $('<div />').add('<div />').addClass('div').appendTo($(this));
   });
});

Метод .css() не сгодится потому, что он используется для наложения CSS-свойств. Например, вот этот вызов:

$(function(){
   $("p#append").css('color', 'red');
});

налагает свойство

{color: 'red';}

Answer 2

[homm]

1)
Syntax error at line 5 while loading:
$("p #append").click
^
expected ')', got '$'

2)
$("p #add") → $("p#add")
$("p #append") → $("p#append")

Comments

[homm]

3) На момент выполнения кода дом-объекты еще не созданы. Нужно обернуть в $(function() {});

[turbo_exe]

второе и третье пофиксил, код добавил в пост. не могли бы вы более подробно пояснить первое? заранее спасибо.

Answer 3

[homm]

$.append() заработал, $.add() — по прежнему нет

Что значит не заработал? Разберем вашу строчку:

$(this).add(«div»).css(«class», «div»);

1) Выбираем в объект элемент this (параграф).
2) Добавляем в этот объект с параграфами все найденные на странице дивы. Так как дивов на странице скорее всего нет, результат не меняется, $(this).
3) Применяем к этим объектам .css(«class», «div»).

Кстати, что это за новое css-свойство, class? Ни разу о таком не слышал.

Что касается пункта 1) Syntax error at line 5 while loading:
В предлагаемом для скачивания архиве код выглядит так:
$("p #add").click(function() {…}
$("p #append").click(function() {…}
Без закрывающих скобок и точек с запятой.

Comments

[turbo_exe]

спасибо большое за корректное объяснение работы функции add()

Answer 4

[wdtime_ru]

Про метод append сказать ничего не могу, но вот про jQuery add достаточно подробно описано.