jquery - Resetting data-Id for dynamically appended inputs -

-

so red squares http://imgur.com/lqyatdb showing i'm trying achieve want reset number after each champion start [1] might want add more fields first champion increase old number 

$(document).ready(function(){     championnumber = 1;     spellnumber=1;     $('a#addchampion').on('click',function(){          $('div#championinput').append(         '<div class="champion" data-id="'+championnumber+'">\              <a href="#" class="remove">remove</a>\              <br>\              <input type="text" class="championinput" list="champions" name="champion[]" placeholder="champion '+championnumber+'">\              <datalist id="champions"></datalist>\              <a href="#" class="addspell">add spell</a>\              <br>\          <div>');         for(var key in champions){             if(champions.hasownproperty(key)){                 $('#champions').append('<option value="' + key + '">');             }         }         championnumber++;     });     $('div#championinput').on('click', 'a.remove',function(){         $(this).parent('div.champion').remove();      });     $('div#championinput').on('click', 'a.addspell',function(){          $(         '<div class="spell" data-id="'+spellnumber+'">\             <select name="change['+$(this).parent('div').data('id')+'][]">\                <option value="passive">passive</option>\                <option value="q" selected>q</option>\                <option value="w">w</option>\                <option value="e">e</option>\                <option value="r">r</option>\             </select>\             <input type="text" name="championspell['+$(this).parent('div').data('id')+'][]">\             <br>\             <textarea type="text" size="20" name="spelldescription['+$(this).parent('div').data('id')+'][]" placeholder="enter description" />\             <select name="spellchange['+$(this).parent('.champion').data('id')+']['+spellnumber+'][]">\                <option value="buff">buff</option>\                <option value="nerf">nerf</option>\                <option value="new">new</option>\                <option value="change">change</option>\                <option value="bugfix">bugfix</option>\             </select>\             <a href="#" class="addchange">add change </a>\             <a href="#" class="removespell">remove spell</a>\         </div>\         ').appendto('.champion[data-id='+$(this).parent('div').data('id')+']');         spellnumber++;     });     $('div#championinput').on('click', 'a.addchange',function(){         $(this).next('a.removespell').after(            '<div class="change">\                 <textarea type="text" size="20" name="spelldescription['+$(this).parent('div').data('id')+'][]" placeholder="enter description" />\                 <select name="spellchange['+$(this).parent().parent('div').data('id')+']['+$(this).parent('.spell').data('id')+'][]">\                    <option value="buff">buff</option>\                    <option value="nerf">nerf</option>\                    <option value="new">new</option>\                    <option value="change">change</option>\                    <option value="bugfix">bugfix</option>\                 </select>\                 <a href="#" class="removechange">remove change</a>\             </div>');     });     $('div#championinput').on('click', 'a.removespell',function(){         $(this).closest('.spell').remove();     });     $('div#championinput').on('click', 'a.removechange',function(){         $(this).closest('.change').remove();     });  });

maybe easiest solution update indexes after each user interaction. isn't efficient code (jquery.each slower using for loops), works (demo):

renumber = function(){     $('.champion').each(function( ){         var championindex = + 1;         $(this)             .attr( 'data-id', championindex )             .find( 'input' )             .attr( 'placeholder', 'champion ' + championindex )             .end()             .find( '.spell' )             .each(function( j ){                 var spellindex = j + 1;                 $(this)                     .attr( 'data-id', spellindex )                     .find( 'select:first' )                     .attr( 'name', 'change[' + championindex + '][' + spellindex + ']' )                     .next() // input                     .attr( 'name', 'championspell[' + championindex + '][' + spellindex + ']' )                     .next() // textarea                     .attr( 'name', 'spelldescription[' + championindex + '][' + spellindex + ']' )                     .next() // 2nd select                     .attr( 'name', 'spellchange[' + championindex + '][' + spellindex + ']' );             });           });  };

call above function after item added or removed form.


Comments

Post a Comment

Popular posts from this blog

c# - Better 64-bit byte array hash -

-
i need hash algorithm produces 64-bit hash code ( long ) fewer collisions string.gethashcode() , fast (no expensive calls cryptographic functions). here's implementation of fnv still shows 3% of collisions after testing 2 million random strings. need number way lower. void main() { const string chars = "abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz!#@$%^&*()_+}{\":?><,./;'[]0123456789\\"; const int n = 2000000; var random = new random(); var hashes = new hashset<long>(); int collisions = 0; for(int = 0; < n; i++) { var len = random.next(chars.length); var str = new char[len]; (int j = 0; j < len; j++) { str[j] = chars[random.next(chars.length)]; } var s = new string(str); if(!hashes.add(get64bithash( s ))) collisions++; } console.writeline("collision percentage after " + n + " random strings: " + ((doubl
Read more

webrtc - Which ICE candidate am I using and why? -

-
[questions in bold below] i have setup kurento media server 5.1.3 in datacenter behind firewall running os ubuntu 14.04. has 2 network cards: 222.222.222.222 (eth0 - private ip) 111.111.111.111 (eth1 - public ip) attached below sdp (setremotedescription) when browser connected kurento media server type: answer, sdp: v=0 o=- 5487318114793304426 0 in ip4 0.0.0.0 s=kurento media server c=in ip4 0.0.0.0 t=0 0 a=group:bundle audio video m=audio 59068 rtp/savpf 111 0 c=in ip4 111.111.111.111 a=rtpmap:111 opus/48000/2 a=rtpmap:0 pcmu/8000 a=sendrecv a=rtcp:59068 in ip4 111.111.111.111 a=rtcp-mux a=ssrc:669011897 cname:user39019747@host-6e83e4c2 a=extmap:3 http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time a=mid:audio b=as:20 a=ice-ufrag:ymdk a=ice-pwd:lylifk5ueqzpwm91ddj37e a=fingerprint:sha-256 ff:0f:81:8c:41:4e:b4:b6:c6:d8:36:f3:d6:5f:09:fd:5f:af:13:b3:9d:fc:12:66:ac:f3:56:d6:5b:0a:73:5d a=candidate:1 1 udp 2013266431 111.111.111.111 55239 typ host a=candidate:2 1 udp
Read more

php - Zend Framework / Skeleton-Application / Composer install issue -

-
i trying create zend framework application using skeleton in netbeans. when run composer install, following error message: "c:\php\php.exe" "c:\composer\composer.phar" "--ansi" "--no-interaction" "update" "--dev" using deprecated option "dev". dev packages installed default now. loading composer repositories package information updating dependencies (including require-dev) requirements not resolved installable set of packages. problem 1 - package requires php >=5.5 php version (5.4.42) not satisfy requirement. problem 2 - installation request zendframework/zendframework 2.5.1 -> satisfiable zendframework/zendframework[2.5.1]. - zendframework/zendframework 2.5.1 requires php >=5.5 -> php version (5.4.42) not satisfy requirement. done. apparently, zend framework only needs php 5.3+ contradicts above. need use php 5.4. my composer.json following: { "name": "
Read more