Home > Developer > Web Develop
Recently I feel very close to learning. jquery did not learn a few days and began to learn Angularjs. Learning time is to look at the teacher with a very simple, write their own time feel not very useful. But there are a lot of problems when learning angularjs, and I think it is necessary to practise both jquery and Angularjs.
The previous one has a box with a name in it and then select it to move to the right, or you can move right to the left. I have seen this effect on many websites before. Now let me explain briefly.
<body><divclass=" All"> <div> <SelectName=" Left"Id=" Left" class=" Left"multiple="multiple"Size="Ten"> <option value="1"> Guan Yu </option> <option value="2"> Zhang Fei </option> <option value="3"> Liu Bei </option> <option value="4"> Caocao </option> <option value="5"> Zhuge Liang </option> <option value="6"> Zhou Yu </option> <option value="7"> Huang Gai </option> </Select> </div> <div> <button onclick="MoveRight ()">></button><br> <button onclick="moveallright ()">>></button><br> <button onclick="MoveLeft ()"><</button><br> <button onclick="Moveallleft ()"><<</button><br> </div> <div> <div> <SelectName=" Left"Id=" Right" class=" Right"multiple="multiple"Size="Ten"> </Select> </div> <div> <button onclick="moveUp ()">↑</button><br> <button onclick="MoveDown ()">↓</button> </div> </div></div></body>
As above, the body inside write two select,multiple= "multiple" size= "10" so the box will be higher, you can see all the following option.
The page is as follows:
<script src= "Js/jquery-1.9.1.min.js" ></script>
jquery files must not forget to import.
Below to add the specific JS
Move all into the right border:
function Moveallright () { $ (". Left>option"). AppendTo (" . Right " );}Defines a function that has a function named Movvallright. We use Appento to operate.
Appendto Overview:
Appends all matching elements to another specified set of element elements.
In fact, using this method reverses the normal $ (A). Append (b) operation, that is, instead of appending B to a, append a to B.
As follows:
Similarly: The right is all moved to the left, and the code is as follows:
function Moveallleft () { $ (". Right>option"). AppendTo (". left");}As follows:
Of course, the above can be done with append.
Append Overview: Append content to each matching element.
Use the append above to write the following code:
function Moveallright () { $ (".right"). Append (".left> Option");} function Moveallleft () { $ (".left"). Append (".right> Option"); }Let's move on to the left-hand side of the box.
function MoveRight () { $ (". left>option:selected"). AppendTo (" .right"); $ ("option:selected"). Prop ("selected" ) false );}Selected: Matches all selected option elements
$ (". Left>option:selected") represents all selected option in class as left.
$ ("option:selected"). Prop ("selected", false) is to let the selected move past the state from checked to unchecked.
As follows:
Similarly: Select part of the right border and move to the left border
function MoveLeft () { $ (". right>option:selected"). AppendTo (" . Left " ); $ ("option:selected"). Prop ("selected" ) false ); }As follows:
Select one of the parts and move up:
function MoveUp () { $ ("option:selected:first"). Prev (). Before ($ (" option:selected")); }We need to use the prev.
Prev Overview: Gets a collection of elements that contain the first sibling element that is immediately adjacent to each element in the matching element collection.
You can filter with an optional expression. Only the immediate sibling elements are matched to, not all of the preceding sibling elements.
Before overview: inserting content before each matching element
First Overview: Gets a match for the initial element. If you do not use first, if you do not select a move up the process will continue to increase. And just move the selected middle unchecked to
Below, but the selected does not continue to move up.
：
Similarly, the downward shift is the same:
function MoveDown () { $ ("option:selected:last"). Next (). After ($ (" option:selected")); }Next Overview: Gets a collection of elements that contain a matching set of elements that are immediately behind each element in the next sibling element.
This function only returns the next sibling element, not all of the siblings behind it (you can use Nextall). You can filter with an optional expression.
After Overview: Inserts the content after each matching element.
Last Overview: Gets the final element.
：
jquery content moves from the left border to the right border
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
