上DIVS

Question

實現合併單元格我有這樣
風格

.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> 

我需要一個div佈局是合併同類重視和兄弟姐妹的div成單DIV爲列跨度。對於我有這樣的做法如下

$('#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(); 
     } 

    }); 
}); 

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不同的方法，你可以用更好的方式開發它。 demo

$('#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'}); 
    } 

}); 
});