定義リストの表示/非表示DD要素

Question

私は次のシナリオのためのソリューションを見つけ出す（または見つける）ことができませんでした：

我々はそうのようなdlを持っている：

<dl> 
    <dt>Term</dt> 
     <dd>Item 1</dd> 
     <dd>Item 2</dd> 
     <dd>Item 3</dd> 
     <dd>Item 4</dd> 
     <dd>Item 5</dd> 
    <dt>Term</dt> 
     <dd>Item 1</dd> 
     <dd>Item 2</dd> 
     <dd>Item 3</dd> 
     <dd>Item 4</dd> 
     <dd>Item 5</dd> 
</dl> 

各dtグループの最初の3つ後にすべてddsを非表示にして、残りの表示を切り替える「もっと見る」リンクを表示する必要があります。

ヒントをお聞かせください。

Answer 1

ありがとうございました。これで私たちは次のようになりました：

$(function(){ 
    $("dt").each(function(){ 
     var $dd = $(this).nextUntil("dt"); 
     if ($dd.length > 3 && $('input:checked', $dd).length < 1) { 
      $dd.filter(":gt(2)").hide(); 
      $dd.last().after($("<dd class='t'>View More</dd>").click(function(e){ 
       e.preventDefault(); 
       $(this).text($(this).text() == "View More"?"Hide More":"View More").prevAll("dt:first").nextUntil("dt").filter(":gt(2):not('dd.t')").toggle() 
      }).css({'cursor':'pointer', 'color':'#0000FF'})); 
     } 
    }); 
}); 

Answer 2

$('dd:nth-child(n+4)')

これは最初の3つのDDS以外のすべてを選択する必要があります。これは役に立ちます：http://leaverou.me/demos/nth.html

Answer 3

これを行うより良い方法があるかもしれませんが、これが私が最初に思いついたものです。それはdl内dtの要素を見つけ、その後、それらを介してループし、次のdtまで最初の3の後にすべての要素を非表示にします。

$("dl").find("dt").each(function() { 
    var count = 0; 
    $(this).nextUntil("dt").filter(function() { 
     return count++ > 2; 
    }).hide(); 
    $(this).append(" <a href='#' class='showMore'>See more</a>"); 
}); 
$(".showMore").live("click", function() { 
    $(this).closest("dl").find("dt").each(function() { 
     $(this).nextUntil("dt").show(); 
     //As suggested by comments, you may want to hide the 'Show more' link now: 
     $(this).remove(); 
    }); 
}); 

ここworking exampleです。

Answer 4

あなたが<dl>の奥深くいるので、私は最後の<dd>タグの後に「もっと見る」のリンクを含む新しい<dd>要素を挿入し、それに含まれてい<dd>タグと区別するために、クラスを与えるだろう実際のデータ

$(document).ready(function() { 
    $('dt').each(function() { 
    var sel = $(this), dd = sel.nextUntil('dt'); 
    if (dd.length > 3) { 
     dd.slice(3).addClass('more hidden'); 
     dd.slice(dd.length-1).after('<dd class="viewMore"><a href="javascript:void(0)">view more</a></dd>'); 
    } 
    }); 
    $('dl').delegate('dd.viewMore a', 'click', function() { 
    $(this).closest('dd').prevUntil('dt').filter('.more').toggleClass('hidden'); 
    }); 
}); 

ちょうどあなたがあなたのCSSでこのような何か持っていることを確認してください。

.hidden { display: none; } 

は編集：私はそれを修正します。

Answer 5

Here's the demo.この

$(function(){ 
    $("dt").each(function(){ 
    var $dd = $(this).nextUntil("dt"), $this; 
    $dd.filter(":gt(2)").hide(); 
    if($dd.length > 3){ 
     $dd.last().after($("<a href='#'>View More</a>").click(function(e){ 
      e.preventDefault(); 
      $(this).text($(this).text() == "View More"?"Hide More":"View More") 
      .prevAll("dt:first").nextUntil("dt").filter(":gt(2):not('a')").toggle() 
     })); 
    } 
    }); 
}); 

の作業demo

Answer 6

の作業例を試してみてください：http://jsfiddle.net/APB6F/。このソリューションは、Show/Hide機能を切り替えるオプションを提供します。

$("dl").find("dt").each(function(k,v){ 
    var dtObj = $(this); 
    dtObj.nextUntil("dt").filter(function(index){ 
     if(index > 2){ $(this).hide(); } 
    }); 
    dtObj.append("<a href='#' class='view-more'>Show More</a>"); 
}); 

$(".view-more").live('click', function(){ 
    var mObj = $(this); 
    if(mObj.text() == "Show More"){ 
     mObj.closest("dt").each(function(k,v){ 
      var dObj = $(this); 
      dObj.nextUntil("dt").filter(function(index){ 
       $(this).show(); 
      });   
     }); 
     mObj.text("Hide More"); 
    }else{ 
     mObj.closest("dt").each(function(k,v){ 
      var dObj = $(this);    
      dObj.nextUntil("dt").filter(function(index){ 
       if(index > 2){ $(this).hide(); } 
      });   
     }); 
     mObj.text("Show More"); 
    } 
});