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/aiioo7/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();
        }

    });
});

Answer 2

这里有一些帮助帮助您入门：http: //jsfiddle.net/WeJmu

$('#head > div').each(function(){
    $(this).find('.l-item').each(function(){
        var txt = $(this).text();
        var num_eaten = 0;
        $(this).siblings().each(function () {
            if ($(this).text() === txt) {
                num_eaten++;
                $(this).remove();
            }
        });

        if (num_eaten > 0) {
            $(this).width($(this).width() * (num_eaten + 1));
        }
    });
});

Answer 3

与next不同的方法，你可以用更好的方法开发它。演示

$('#head > div').each(function(){
    $(this).find('.l-item').each(function(){
         var txt = $(this).text();
         if( $(this).next().text() == txt){
            $(this).next().width($(this).next().width() + 20);
            $(this).remove();   
         }
    });
});

Answer 4

如果从外观上看，您希望具有相同文本的连续 div 看起来像单个 div/列；

http://jsfiddle.net/WeJmu/2/

$('#head > div').each(function(){
$(".l-item").each(function(){
    var $this=$(this);
    var $next=$(this).next();
    if( $this.text()==$next.text()){
        $this.css({'border-right':'none'});
        $next.css({'border-left':'none'});
    }

});
});