Forum PHP.pl > [jQuery] jak zmienić name w klonowanym selekcie ?

arclite

30.01.2012, 10:53:51

Witam,
mam następujący kłopot. mam napisaną funkcję klonowania elementu

Kod

$(document).ready(function() {
    $('#plus').click(function() {

      var num     = $('.inputCopy').length;
      var newNum  = new Number(num + 1);

      newInput = $('#input' + num).clone().attr('id', 'input' + newNum);

      var selectInput = newInput.find('select');
      var selectInput1 = newInput.find('.kid' +num);
      selectInput.attr('name', selectInput.attr('name').replace(/\d+/, new String(nextSelectValue)));
      nextSelectValue += 1;
      selectInput1.attr('name', selectInput1.attr('name').replace(/\d+/, new String(nextSelectValue1)));
      nextSelectValue1 += 1;

      newInput.children(':first').attr('id', 'pokoj' + newNum).attr('class','next' + num);

      $('#input' + num).after(newInput);
      $('#del').css({display: ''});

      if (newNum == 5)
          $('#add').css({display: 'none'});
    });
});

który klonuje taki zestaw selectow

Kod

<div class="box0">
                    <ul>
                        <li>Perks</li>
                        <li id="input1" class="inputCopy">
                            <ul class="pokoj">
                                <li class="roomnum">Selects set 1</li>
                                <li>Select 1
                                    <select name="Select[Ask][0][Adults]" id="tata0">
                                        <option label="0" value="0">0</option>
                                        <option label="1" value="1" selected="selected">1</option>
                                        <option label="2" value="2">2</option>
                                        <option label="3" value="3">3</option>
                                        <option label="4" value="4">4 </option>
                                    </select>
                                </li>
                                <li>Select 2:
                                    <select name="Select[Ask][0][Children]" id="dziecko0">
                                        <option label="0" value="0">0</option>
                                        <option label="1" value="1">1</option>
                                        <option label="2" value="2">2</option>
                                        <option label="3" value="3">3</option>
                                        <option label="4" value="4">4 </option>
                                    </select>
                                </li>
                                <li>
                                <ul class="kids" style="display:none">
                                <li class="title">Value of perk </li>
                                <li>

                                    <select name="Select[Ask][0][Children][0]" class="kid1" disabled="disabled" style="display:none">
                                        <option label="0" value="0">0</option>
                                        <option label="1" value="1">1</option>
                                        <option label="2" value="2">2</option>
                                        <option label="3" value="3">3</option>
                                        <option label="4" value="4">4 </option>
                                    </select>
                                </li>
                                <li>
                                    <select name="Select[Ask][0][Children][1]" class="kid2" disabled="disabled" style="display:none">
                                        <option label="0" value="0">0</option>
                                        <option label="1" value="1">1</option>
                                        <option label="2" value="2">2</option>
                                        <option label="3" value="3">3</option>
                                        <option label="4" value="4">4 </option>
                                    </select>
                                </li>
                                <li>
                                    <select name="Select[Ask][0][Children][2]" class="kid3" disabled="disabled" style="display:none">
                                        <option label="0" value="0">0</option>
                                        <option label="1" value="1">1</option>
                                        <option label="2" value="2">2</option>
                                        <option label="3" value="3">3</option>
                                        <option label="4" value="4">4 </option>
                                    </select>
                                </li>
                                <li>
                                    <select name="Select[Ask][0][Children][3]" class="kid4" disabled="disabled" style="display:none">
                                        <option label="0" value="0">0</option>
                                        <option label="1" value="1">1</option>
                                        <option label="2" value="2">2</option>
                                        <option label="3" value="3">3</option>
                                        <option label="4" value="4">4 </option>
                                    </select>
                                </li>
                                </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="pnav" id="minus"><a href="java script:void(0);" >Delete</a></li>
                    <li class="pnav" id="plus"><a href="java script:void(0);" >add set of perks</a></li>
                    </li>
                    </ul>

                <input class="search_btn" type="submit" value="Send" name="send" />
                </div>

i moje pytanie jest takie jak mogę zrobić żeby w name klonowanego selectu o klasie .kid(numer) Select[Ask][0][Children][3] zmieniała się tylko pierwsza napotkana liczba ? bo teraz nazwa klonowanego selectu wyglada tak Select[Ask][1][Children][0] i kazdy nastepny wyglada tak samo a potrzebuję żeby wyglądało to tak:

Select[Ask][1][Children][0]
Select[Ask][1][Children][1]
Select[Ask][1][Children][2]
Select[Ask][1][Children][3]

a nie
Select[Ask][1][Children][0]
Select[Ask][1][Children][0]
Select[Ask][1][Children][0]
Select[Ask][1][Children][0]

z góry dzięki za pomoc

strife

30.01.2012, 11:00:38

A nie możesz elementów, które sklonowałeś `przelecieć` $.each? I w pętli zmienić name? A name zmienisz prosto, pobierzesz aktualny zmodyfikujesz js'em i nadpiszesz.

arclite

30.01.2012, 11:07:54

no właśnie nie za bardzo wiem jak to mogę osiągnąć bo js to dla mnie jeszcze czarna magia :/

strife

30.01.2012, 11:12:34

Cytat(arclite @ 30.01.2012, 11:07:54 )

no właśnie nie za bardzo wiem jak to mogę osiągnąć bo js to dla mnie jeszcze czarna magia :/

Ale widzę, że używasz jQuery

http://api.jquery.com/each/

Jeżeli ten Twój kod rzeczywiście działa to jeszcze przed kodem:

[HTML] pobierz, plaintext 
$('#input' + num).after(newInput);
[HTML] pobierz, plaintext

Musisz "przelecieć" ten sklonowany obiekt, znaleźć w nim wszystkie select'y i podmienić im nazwy ($.attr('name', newName)).

Pisz, będziesz miał problemy pomożemy.

arclite

30.01.2012, 11:29:12

Tu jest link do dzaiłającego kodu. tylko jedna rzecz mnie martwi właśnie te numeracje bo jak dałem żeby aktualizował name takim sposobem:

Kod

selectInput1.attr('name', selectInput1.attr('name').replace(/\d+/, new String(nextSelectValue1)));
nextSelectValue1 += 1;

to numeracje zachowuje fajnie ale drugi numer jest wyzerowany w kazdym elemencie