javascript - 在DIVS上实现colspan

我有这样的div布局
 样式

.l-item{
    display:inline-block;
    border:1px solid #CCC;
    width:20px;
    height:20px
}


<div id="head">
   <div>
       <div class="l-item">a</div>
       <div class="l-item">a</div>
       <div class="l-item">a</div>
       <div class="l-item">a</div>
       <div class="l-item">b</div>
       <div class="l-item">b</div>
   </div>
   <div>
       <div class="l-item">x</div>
       <div class="l-item">y</div>
       <div class="l-item">z</div>
       <div class="l-item">z</div>
       <div class="l-item">z</div>
       <div class="l-item">x</div>
   </div>
   <div>
       <div class="l-item">1</div>
       <div class="l-item">2</div>
       <div class="l-item">3</div>
       <div class="l-item">4</div>
       <div class="l-item">4</div>
       <div class="l-item">4</div>
   </div>
</div>

我的要求是将类似价值的同级DIVS合并为colspan的单个DIV。为此，我有如下方法

$('#head > div').each(function(){
    $(this).find('.l-item').each(function(){
         var txt = $(this).text();
         $(this).siblings().filter(function(){
             return $(this).text() == txt;
         });
    });
});

看来它将与DOM混淆，请使用其他解决方案。

最佳答案

试试看：-http://jsfiddle.net/adiioo7/rnL3h/

JS：-

$('#head > div').each(function () {
    $(this).find('.l-item').each(function () {
        var txt = $(this).text();
        var items = $(this).siblings().filter(function () {
            return $(this).text() == txt;
        });
        if (items.length > 0) {
            $(this).width($(this).width() * (items.length + 1));
            items.remove();
        }

    });
});

关于javascript - 在DIVS上实现colspan，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18371658/