仅强制三列布局 JS Jquery

Question

Page： https://ntsu.unioncloudsandpit.org/resources

DOM 中的每一行结果如下所示

<div class="uc-document-row">
<div class="uc-document-block ">
<div class="uc-doc-bg-ext">
<a class="uc-doc-bg-ext-wrapper" title="2013 Exec Elections Results" href="/resources/2013-exec-elections-results"></a>
<div class="clear"></div>
</div>
<div class="uc-document-titles">
<h2>2013 Exec Elections Results</h2>
<h3>application-vnd-openxmlformats-officedocument-wordprocessingml-document</h3>
</div>
<span class="uc-doc-upload-time">
17 September 2018
</span>
<div class="uc-resource-summary">
<p></p>
</div>
<div class="uc-resource-show-download">
<a title="Details" class="uc-resource-details-link btn-2018" href="/resources/2013-exec-elections-results" style="font-size: 10px;">Details</a>
<a class="uc-resource-download-link btn-2018" href="https://ntsu.unioncloudsandpit.org/resources/2013-exec-elections-results/download_attachment" style="font-size: 10px;">Download</a>
</div>
<div class="clear"></div>
</div>

每行 4 个。

对于输入三列布局，我可以删除第四列并重新排序，例如：

$('.uc-document-row .uc-document-block:nth-child(4)').remove();
$('.uc-document-block').css('width','21%');
$('.uc-document-block').css('padding','4%');
$('.uc-document-block').css('margin','2');

但是，我将如何实际重新排序，以便第四个元素向下移动到下一行并确保每行恰好 3 个项目？ 我认为这需要分离/前置？

我只能通过JavaScript与页面交互。

Answer 1

检查下面的JavaScript代码：

$('.uc-document-list > .uc-document-row').each(function(){
var currentBlocksCount = $(this).find('.uc-document-block ').length;
// console.log('currentBlocksCount=', currentBlocksCount);
var flagNextBlock = false;
if( $(this).next('div').hasClass('uc-document-row') ) {
flagNextBlock = true;
}
// console.log('flagNextBlock=', flagNextBlock);
if( !flagNextBlock ) {
$(this).after('<div class="uc-document-row"></div>');
}
var nextBlockObj = $(this).next('div.uc-document-row');
if( currentBlocksCount > 3 ) {
$(this).find('.uc-document-block').each(function(key, value){
if( key > 2 ) {
var cloneObj = $(this).clone();
nextBlockObj.append(cloneObj);
$(this).remove();
}
});
}
});