javascript - 在 DIVS 上实现 colspan

Question

我有一个这样的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 合并到单个 DIV 作为 colspan。为此，我有如下方法

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

它似乎会弄乱 DOM，请提供任何其他解决方案..

Answer 1

试试这个:- 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();
        }

    });
});