1


このスタイル のような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>

私の要件は、同様の値と兄弟の DIV を 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を台無しにするようです.これに対する他の解決策をお願いします..

4

4 に答える 4

3

これを試してみてください:- 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();
        }

    });
});
于 2013-08-22T04:58:37.360 に答える
1

外観上、同じテキストを持つ連続した 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'});
    }

});
});
于 2013-08-22T05:28:13.393 に答える
1

開始するためのちょっとしたヘルプがあります: 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));
        }
    });
});
于 2013-08-22T04:52:48.113 に答える