javascript - 如何实现带子 div 的自动换行效果

Question

我目前正在处理一个页面，该页面有一个带有复选框的表单(在内联模态窗口(“Colobox”代码))，单击该复选框时，将 div(描述选中的复选框)追加回父 div在“父”页面。
我的问题是:如何使用这些子 div 实现“自动换行”效果？
当选中复选框时，我有 3 个父 div，子级附加到这些父 div。但是，我希望 .ksa_check_k 类的 div 留在一个“行 div”上，.ksa_check_s 类的 div 留在一个“行 div”上，而 .ksa_check_a 类的 div 留在一个“行 div”上。此外，是否有一种方法可以根据每个子 div 的 id 中的数值“排序”每个“行”中的 div，以补偿复选框的“数字顺序乱序”点击？

这是基本的 css、javascript 和 html 表单代码(如下)。可以在此处找到引用的颜色框代码文件:http://www.jacklmoore.com/colorbox/

感谢您的帮助。

 <style>
    .inline_box{
    background-color:#FFCC00;
    padding:10px;  
    }

    tr.oddrow td {
    background-color: #eee;
    }

    .toBeCompared_k {
    display:block;
    background:red;
    }
    .toBeCompared_s {
    display:block;
    background:blue;
    }
    .toBeCompared_a {
    display:block;
    background:yellow;
    }
    .toBeCompared_new_k {
    display:block;
    background:red;
    border:1px solid black;
    margin:2px;
    float:left;/**/
    }
    .toBeCompared_new_s {
    display:block;
    background:blue;
    border:1px solid black;
    margin:2px;
    float:left;/**/
    }
    .toBeCompared_new_a {
    display:block;
    background:yellow;
    border:1px solid black;
    margin:2px;
    float:left;/**/
    }
    .preview_notice {
    float:left;
    }
 </style>


<!--  Colorbox code - begin -->
<link rel="stylesheet" href="colorbox/colorbox.css" />
<script src="overlay_2/jquery.min.js" type="text/javascript"></script>
<script src="colorbox/jquery.colorbox.js"></script> 



    <script>
        $(document).ready(function(){
        $("#colorbox, #cboxOverlay").appendTo('form:first');
            //Examples of how to assign the Colorbox event to elements
            $(".group1").colorbox({rel:'group1'});
            $(".group2").colorbox({rel:'group2', transition:"fade"});
            $(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
            $(".group4").colorbox({rel:'group4', slideshow:true});
            $(".ajax").colorbox();
            $(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
            $(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
            $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
            $(".inline").colorbox({inline:true, width:"50%"});
            $(".callbacks").colorbox({
                onOpen:function(){ alert('onOpen: colorbox is about to open'); },
                onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
                onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
                onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
                onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
            });

            $('.non-retina').colorbox({rel:'group5', transition:'none'})
            $('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});

            //Example of preserving a JavaScript event for inline calls.
            $("#click").click(function(){ 
                $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
                return false;
            });
        });
</script>
<!-- Colorbox code - end -->

<!-- Function nth occurrence within string - begin -->
<script>
function nth_occurrence (string, char, nth) {
var first_index = string.indexOf(char);
var length_up_to_first_index = first_index + 1;

if (nth == 1) {
    return first_index;
} else {
    var string_after_first_occurrence = string.slice(length_up_to_first_index);
    var next_occurrence = nth_occurrence(string_after_first_occurrence, char, nth - 1);

    if (next_occurrence === -1) {
        return -1;
    } else {
        return length_up_to_first_index + next_occurrence;  
    }
}
}


</script>
<!-- Function nth occurrence within string - end -->

<!-- Function show div elements - begin -->
<script>
$(document).ready(function(){

$(".ksa_check_k, .ksa_check_s, .ksa_check_a").click(function(){

if ($("#ksaChecks input:checkbox:checked").length > 0)
{

if ($('div.toBeCompared_pre').css('display') == 'none')
{
$('div.toBeCompared_pre').show();
}
if ($('div.preview_notice').css('display') == 'none')
{
$('div.preview_notice').show();
}
// any one is checked


}
else
{
// none is checked
if ($('div.toBeCompared_pre').css('display') == 'block') 
{
$('div.toBeCompared_pre').hide();
}
if ($('div.preview_notice').css('display') == 'block')
{
$('div.preview_notice').hide();
}
}

});

});
</script>
<!-- Function show div elements - end -->


<!-- Function to put 'preview' of selected ksa on page - begin -->
<script>
//code to put 'preview' of selected ksa on page
$(document).ready(function(){
$(".ksa_check_k").click({param1: "k", param2: "World"}, cool_function2);
$(".ksa_check_s").click({param1: "s", param2: "World"}, cool_function2);
$(".ksa_check_a").click({param1: "a", param2: "World"}, cool_function2);


function cool_function2(event){

var ksa_section=event.data.param1

var title = $(this).closest('.ksa_check_group').find('.ksa_check_'+ksa_section).attr("id")

var title_partial = title.substring(nth_occurrence(title,'_',2)+1,nth_occurrence(title,'_',3))

if($(this).prop('checked')){

var html = '<div id="' + title_partial + '"class="toBeCompared_new_' + ksa_section + '">' + title_partial + '</div>';



$('div.toBeCompared_' + ksa_section).append(html);

$('div.toBeCompared_' + ksa_section).show();

} else {
$('div[id="' + title_partial + '"]').remove();


}
}
});
</script>
<!-- Function to put 'preview' of selected ksa on page - end -->



<table>
<tr>
<td>

<p><a class='inline' href="#inline_content_k">Add/Edit KSAs</a></p>





     <div class="toBeCompared_pre" style='display:none'>The following KSAs have been added: </div>

     <div class="toBeCompared_k"></div>
     <div class="toBeCompared_s"></div>
     <div class="toBeCompared_a"></div>


     <div class="preview_notice" style='display:none'>Important - Data Has Not Been Saved Yet.  Please click on the 'Update' button below to save your work.</div>






<div style='display:none'>

        <div id='inline_content_k'  class='inline_box'>




<table>
<!-- ////////////// 'k' section -->
<tr>
<td>

<div class="ksa_check_group">

<input name="ksa_on_1k1_1" id="ksa_on_1k1_1" type="checkbox" value="1" class="ksa_check_k">

</div>

<input name="ksa_off_1k1_1" id="ksa_off_1k1_1" type="hidden" value="0" class="ksa_check_k">
</div>

</td>
</tr>
<tr>
<td>

<div class="ksa_check_group">

<input name="ksa_on_1k2_2" id="ksa_on_1k2_2" type="checkbox" value="1" class="ksa_check_k">

</div>

<input name="ksa_off_1k2_2" id="ksa_off_1k2_2" type="hidden" value="0" class="ksa_check_k">
</div>

</td>
</tr>
<!-- ////////////// 's' section -->
<tr>
<td>

<div class="ksa_check_group">

<input name="ksa_on_1s1_1" id="ksa_on_1s1_1" type="checkbox" value="1" class="ksa_check_s">

 </div>

<input name="ksa_off_1s1_1" id="ksa_off_1s1_1" type="hidden" value="0" class="ksa_check_s">
</div>

</td>
</tr>
<tr>
<td>

<div class="ksa_check_group">

<input name="ksa_on_1s2_2" id="ksa_on_1s2_2" type="checkbox" value="1" class="ksa_check_s">

</div>

<input name="ksa_off_1s2_2" id="ksa_off_1s2_2" type="hidden" value="0" class="ksa_check_s">
</div>

</td>
</tr>
<!-- ////////////// 'a' section -->
<tr>
<td>

<div class="ksa_check_group">

<input name="ksa_on_1a1_1" id="ksa_on_1a1_1" type="checkbox" value="1" class="ksa_check_a">

</div>

<input name="ksa_off_1a1_1" id="ksa_off_1a1_1" type="hidden" value="0" class="ksa_check_a">
</div>

</td>
</tr>
<tr>
<td>

<div class="ksa_check_group">

<input name="ksa_on_1a2_2" id="ksa_on_1a2_2" type="checkbox" value="1" class="ksa_check_a">

</div>

<input name="ksa_off_1a2_2" id="ksa_off_1a2_2" type="hidden" value="0" class="ksa_check_a">
</div>

</td>
</tr>
</table>


</div>

</div>

Answer 1

就显示而言，获得您想要的东西并不难。您可以使用 float: left; 或 display: inline-block;

我已经包含了一个 fiddle ，其中包含一个获取此布局的示例。该脚本还展示了如何对每一行中的 div 进行排序。您可以将其放入单独的函数中，以便在添加新元素时进行排序。请注意，这不是最有效的方法，因为您正在对可能不需要排序的事物进行排序，因此如果您有很多元素，您将希望通过仅对要添加的行进行排序来优化它，或者直接将新的 child 插入到正确的位置。

此外，我在此示例中基于文本进行排序，但您可以轻松地对子项内特定输入字段中的值存储、子项本身的属性等进行排序。

http://jsfiddle.net/s95BB/

$(function () {
    $(".row").each(function () {
        var children = $(".child", this).sort(function (a, b) {
            return $(a).text() > $(b).text() ? 1 : -1;
        });
        $(this).append(children);
    });
});