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:
- 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>
- 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); }
Comments
Post a Comment