[jQuery] dodawanie inputów Opcje

[colachips]

Witam,

tworzę sobie skrypt ankiet, gdzie ankieta moze miec n pytań, każde pytanie zaś n odpowiedzi. Muszę jakoś dane pytanie i odpowiedzi do niego zgrupować, więc wpadłem na pomysł aby skorzystać z tablic. Tak to wygląda:

[HTML] pobierz, plaintext 
<dl>
	<h2>Dodaj pytania</h2>
 
	<dt><label for="questions[0][q]">Pytanie 1</label></dt>
	<dd><input type="text" name="questions[0][q]" id="questions[0][q]"></dd>
 
	<dt><label for="questions[0][a][0]">Odpowiedź 1</label></dt>
	<dd><input type="text" name="questions[0][a][0]" id="questions[0][a][0]"></dd>
 
	<dt><label for="questions[0][a][1]">Odpowiedź 2</label></dt>
	<dd><input type="text" name="questions[0][a][1]" id="questions[0][a][1]"></dd>
 
	<a href="#" class="link_add_answer">Dodaj kolejną odpowiedź</a><br />
	<a href="#" class="link_add_question">Dodaj następne pytanie</a>			
</dl>
[HTML] pobierz, plaintext 

Chciałbym, korzystając z jQuery aby można było dodawać kolejne pytania i odpowiedzi. Moim celem jest stworzenie takiego kodu, który doda pytanie w takiej formie:

[HTML] pobierz, plaintext 
...
<dt><label for="questions[1][q]">Pytanie 2</label></dt>
	<dd><input type="text" name="questions[1][q]" id="questions[1][q]"></dd>
 
	<dt><label for="questions[1][a][0]">Odpowiedź 1</label></dt>
	<dd><input type="text" name="questions[1][a][0]" id="questions[1][a][0]"></dd>
 
	<dt><label for="questions[1][a][1]">Odpowiedź 2</label></dt>
	<dd><input type="text" name="questions[1][a][1]" id="questions[1][a][1]"></dd>
 
	<dt><label for="questions[1][a][2]">Odpowiedź 3</label></dt>
	<dd><input type="text" name="questions[1][a][2]" id="questions[1][a][2]"></dd>
 
	<a href="#" class="link_add_answer">Dodaj kolejną odpowiedź</a><br />
	<a href="#" class="link_add_question">Dodaj następne pytanie</a>
[HTML] pobierz, plaintext 

Nie proszę o gotowca, chciałbym się czegoś nauczyć, dlatego jeśli ktoś może wskazać przynajmniej kierunek, w którym powinienem podążać, to będę wdzięczny. Mogę ewentualnie zapłacić, jesli ktoś ma coś gotowego (IMG:style_emoticons/default/smile.gif)

Pozdr.

[colachips]

@kamil4u: proste dodawanie elementów umiem. Chodzi mi o bardziej kompleksowe podejście do problemu. Takie jak przedstawił @lukasz1985
@lukasz1985: bardzo mi się podoba taki pomysł. Gdzie zacząć żeby to ugryźć. Możecie coś polecić?

Dzięki

EDIT:

Jakoś sobie poradziłem. Uważam, że brzydko to rozwiązałem, ale na potrzeby chwili powinno wystarczyć.
Mam natomiast problem z czymś takim. Mam kod:

[HTML] pobierz, plaintext 
					<dl class="question">
 
						<dt><label for="questions[0][q]">Pytanie 1</label></dt>
						<dd><input type="text" name="questions[0][q]" id="questions[0][q]"></dd>
 
						<dt><label for="questions[0][a][0]">Odpowiedź 1</label></dt>
						<dd><input type="text" name="questions[0][a][0]" id="questions[0][a][0]"></dd>
 
						<dt><label for="questions[0][a][1]">Odpowiedź 2</label></dt>
						<dd><input type="text" name="questions[0][a][1]" id="questions[0][a][1]"></dd>
 
						<!-- tutaj chcę dodać kolejne pytanie -->
 
						<dt><a href="#" class="link_add_answer">Dodaj kolejną odpowiedź</a></dt>
 
					</dl>
[HTML] pobierz, plaintext 

I chcę dodać kolejne pytanie w miejscu komentarza. Próbowałem tak:

[HTML] pobierz, plaintext 
			$('.link_add_answer').click(function(){
				$(this).parents('dl.question').append(
					'<p>aaa</p>'
				);
				return false;
			});
[HTML] pobierz, plaintext 

To działa, ale tylko dla pierwszego <dl class="question">. Jak dodam kolejne pytania to w tamtych już nie działa (nic się nie dzieje po kliknięciu "Dodaj kolejną odpowiedź". Jak zatem znaleźć pierwsze "dl.question" (parent) dla klikniętego "link_add_answer"?

Ten post edytował colachips 24.02.2013, 23:03:43