javascript - Dynamic jQuery AppendTo Selector -


i have html page adding toolbar item. page using static ids make happen. important line of code looks this:

$('#tb').appendto('.item-toolbar'); 

the above works expected single item. now, i'm trying make work multiple items. in attempt this, i've created fiddle. important code looks this:

function movenugget() {   var selected = $('#selector').val();   var tb = $('#tb');    var items = $('.item-container');    // following line 1 giving me problems.   //.appendto('.item-toolbar'); } 

if visit fiddle, more clear. basically, user can choose 1, 2, or 3 drop down. once selected, tool bar should "appended to" corresponding item-toolbar. challenge is, can't figure out how create selector dynamically selected item , use appendto function.

i want use appendto because actual code more complicated. i've tried strip down part giving me issue. it's approach using appendto. right now, i'm trying:

$(tb).appendto('.item-toolbar'); 

however, approach disregards selected item. i'm not sure how use selected items toolbar within context of appendto.

one of variant of realization:

  1. add unique ids on each item-toolbar (for example view-0, view-1, view-2)

it this:

<select id="selector">   <option value="0">1</option>   <option value="1">2</option>   <option value="2">3</option> </select> <button onclick="movenugget();">  move </button> <br /><br />  <div class="view">   <div class="item-container">     <div class="item-title">       [title]     </div>     <div id="view-0" class="item-toolbar">       [tb]     </div>   </div> </div>  <br /> <hr /> <br />  <div class="view">   <div class="item-container">     <div class="item-title">       [title]     </div>     <div id="view-1" class="item-toolbar">       [tb]     </div>   </div> </div>  <br /> <hr /> <br />  <div class="view">   <div class="item-container">     <div class="item-title">       [title]     </div>     <div id="view-2" class="item-toolbar">       [tb]     </div>   </div> </div>  <br /><br /><br /> <ul id="tb" style="list-style-type: none;">   <li>[1]</li>   <li>[2]</li>   <li>[3]</li> </ul> 
  1. then when click on button can append toolbar appropriate block

here changed function code:

function movenugget() {   var selected = $('#selector').val();   var tb = $('#tb');    var items = $('.item-container');    // add toolbar appropriate block   tb.appendto('#view-' + selected); } 

fiddle


Comments

Popular posts from this blog

Spring Boot + JPA + Hibernate: Unable to locate persister -

go - Golang: panic: runtime error: invalid memory address or nil pointer dereference using bufio.Scanner -

c - double free or corruption (fasttop) -