由于CSS网格没有行包装器的概念，我将如何实现可以将一行向上移动一行的功能？
通常，我会抓住一个父行，并用JS（appendChild等）对dom进行变异。但不确定如何在CSS网格中执行此操作。至少不是以一种干净的方式。
我想我可以抓住6个跨度并通过用JS将它们全部移到顶部来更改dom，但是用6个跨度来做到这一点似乎并不干净。
.grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
border-top: 1px solid black;
border-right: 1px solid black;
}
.grid > span {
padding: 8px 4px;
border-left: 1px solid black;
border-bottom: 1px solid black;
} <body>
<div class="grid">
<span><strong>Id</strong></span>
<span><strong>Full Name</strong></span>
<span><strong>Country</strong></span>
<span><strong>Created at</strong></span>
<span><strong>Email</strong></span>
<span><strong></strong></span>
<span>0</span>
<span>Aaron Kris</span>
<span>Philippines</span>
<span>1991-05-23T14:19:51</span>
<span>[email protected]</span>
<span><button>move row up</button></span>
<span>1</span>
<span>Simeon McLaughlin</span>
<span>Singapore</span>
<span>2012-03-07T00:08:36</span>
<span>[email protected]</span>
<span><button>move row up</button></span>
<span>2</span>
<span>Kelsie Shanahan</span>
<span>Brazil</span>
<span>1985-03-10T20:13:04</span>
<span>[email protected]</span>
<span><button>move row up</button></span>
</div>
</body>最佳答案
我试图得到你的结果
$(document).ready(function(e) {
$('button').on('click', function(){
var allspn=$('.grid>span').length;
var selfpos=$(this).parent('span').index();
var span6=$('.grid>span').eq(selfpos);
var span5=$('.grid>span').eq(selfpos-1);
var span4=$('.grid>span').eq(selfpos-2);
var span3=$('.grid>span').eq(selfpos-3);
var span2=$('.grid>span').eq(selfpos-4);
var span1=$('.grid>span').eq(selfpos-5);
if($(this).parent('span').index()>11){
$(span6).insertBefore($('.grid>span').eq(selfpos-11));
$(span5).insertBefore($('.grid>span').eq(selfpos-11));
$(span4).insertBefore($('.grid>span').eq(selfpos-11));
$(span3).insertBefore($('.grid>span').eq(selfpos-11));
$(span2).insertBefore($('.grid>span').eq(selfpos-11));
$(span1).insertBefore($('.grid>span').eq(selfpos-11));
}
})
});.grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
border-top: 1px solid black;
border-right: 1px solid black;
}
.grid > span {
padding: 8px 4px;
border-left: 1px solid black;
border-bottom: 1px solid black;
}
</style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="grid">
<span><strong>Id</strong></span>
<span><strong>Full Name</strong></span>
<span><strong>Country</strong></span>
<span><strong>Created at</strong></span>
<span><strong>Email</strong></span>
<span><strong></strong></span>
<span>0</span>
<span>Aaron Kris</span>
<span>Philippines</span>
<span>1991-05-23T14:19:51</span>
<span>[email protected]</span>
<span><button>move row up</button></span>
<span>1</span>
<span>Simeon McLaughlin</span>
<span>Singapore</span>
<span>2012-03-07T00:08:36</span>
<span>[email protected]</span>
<span><button>move row up</button></span>
<span>2</span>
<span>Kelsie Shanahan</span>
<span>Brazil</span>
<span>1985-03-10T20:13:04</span>
<span>[email protected]</span>
<span><button>move row up</button></span>
</div>
</div>