僅強制三列布局JS Jquery

Question

頁面： 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個項目？ 我認為這將需要detach / prependTo？

我只能通過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();
            }
        });
    }
});