javascript - How would you go about placing li in different divs? -


i have input box that, when type it, creates visible li word entered on it.

i trying make that, depending on user types (either number 1, 2, or 3), placement of li goes appropriate div (div1 if typed "1", div2 if typed "2", or div3 if typed "3").

and can't figure out how achieve this. can figure out how make pretty else change (the text color, background color, padding, etc) except getting right div!!

can done through css or jquery thing or what?

please give me ideas of go this.

 <input type="text" placeholder="type 1, 2, or 3 here." autocomplete="off">

in case, since value of input element , the sufix of div same, use add li

$('input').change(function () {     var value = this.value;     if ($.inarray(value, ['1', '2', '3']) > -1) {         $('<li />', {             text: value         }).appendto('#d' + value + ' ul')     } })

demo: fiddle

also note adding li ul element not div


Comments

Post a Comment

Popular posts from this blog

javascript - AngularJS custom datepicker directive -

i make custom datepicker directive custom template. but have no idea how start building it... how include date data directive? i appreciate guide or give me advice work on more precisely. it might you! follow below steps html code sample: <label>birth date</label> <input type="text" ng-model="birthdate" date-options="dateoptions" custom-datepicker/> <hr/> <pre>birthdate = {{birthdate}}</pre> <script type="text/ng-template" id="custom-datepicker.html"> <div class="enhanced-datepicker"> <div class="proxied-field-wrap"> <input type="text" ui-date-format="yy-mm-dd" ng-model="ngmodel" ui-date="dateoptions"/> </div> <label> <button class="btn" type="button"><i class="icon-calendar"></i>
Read more

javascript - jQuery date picker - Disable dates after the selection from the first date picker -

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jquery ui datepicker - default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> <script> $(function () { $("#datepicker1").datepicker(); }); </script> <script> $(function () { $("#datepicker2").datepicker(); }); </script> </head> <body> <p>date 1: <input type="text" id="datepicker1"></p> <p>date 2: <input type="t
Read more