First show the initial state:
<body>
<div class="parent">
<div class="child">0</div>
<div class="child">1</div>
<div class="child">2</div>
</div>
<script src="common/jquery/jquery-3.3.1.js"></script>
<script>
$(function(){
var parent = $('.parent') //Get the parent element
var children = parent.children(); //Get all child elements
})
</script>
</body>
The above shows as:
Use append() normally to append the first child element to the parent element:
$(function(){
var parent = $('.parent')
var childs = parent.children();
parent.append(childs.eq(0)); //Use append() to append the first child element to the parent element
})
The display result is: the first child element is removed and appended to the end of the parent element.
But we want to achieve our ideal additional effect, we need this way of writing:
$(function(){
var parent = $('.parent')
var childs = parent.children();
var childsHTML = parent.html(); //Get a string containing all child elements
var rule = /\>\s*\</g; //match all " >< " or " > <" strings
childsHTML = childsHTML.replace(rule, '>,<').split(','); //Split all child elements into arrays
parent.append(childsHTML[0]); //Append the selected element to the last digit of the parent element
})
The displayed result is:
