每個功能的jquery

Question

我已經添加了一個顯示更多或更少功能的div - 這一切工作正常，但現在我只需要允許此功能，如果一個元素超過一定的高度在這種情況下。有很多相同的類，所以我需要對每個元素進行檢查。雖然我有得到它的工作看問題，下面的代碼：

$(document).ready(function() { 
$(".less").hide(); 
$(".more").each(function() { 
     var actualHeight = ($(this).parent().parent().find('.appsList').height()); 
     if (actualHeight < 150) { 
     $(".more").hide(); 
     } 

         }); 

$(".more").click(function() { 
     var paragraphHeight = ($(this).parent().parent().find('.appsList').height()); 
     if (paragraphHeight > 150) { 
     $(this).parent().parent().find('.appsHolderBody').animate({height:(paragraphHeight + 100) }); 
     $(this).hide('slow'); 
     $(this).parent().find('.less').show(); 
     } 
     return false;  
          }); 

$(".less").click(function() { 
     $(this).parent().parent().find('.appsHolderBody').animate({height:190 });    
     $(this).hide('slow'); 
     $(this).parent().find('.more').show(); 
     return false; 
          }); 

}); 

任何幫助，將不勝感激 - 請注意，當我使用.parent.parent我知道它不漂亮，但could'nt針對家長得到它出於某種原因使用eq（4）運行。

所以主要的問題是與代碼

$(".more").each(function() { 
     var actualHeight = ($(this).parent().parent().find('.appsList').height()); 
     if (actualHeight < 150) { 
     $(".more").hide(); 
     } 

它隱藏的所有元素$的這一部分，而不是符合條件的那些（「更多」）。根據要求

<div class="appsHolder"> 

<div class="appsHolderBody"> 
<h5 class="appTitle">General Apps</h5> 
<ul class="appsList"> 

<li class="mainAppList">Resource Manager</li> 
<li><a href="">Launch</a> <a href="">Info</a></li> 

<li class="mainAppList">Resource Manager</li> 
<li><a href="">Launch</a> <a href="">Info</a></li> 

<li class="mainAppList">Yet Another App</li> 
<li><a href="">Launch</a> <a href="">Info</a></li> 

<li class="mainAppList">Yet Another App</li> 
<li><a href="">Launch</a> <a href="">Info</a></li> 

<li class="mainAppList">Yet Another App</li> 
<li><a href="">Launch</a> <a href="">Info</a></li> 

<li class="mainAppList">Yet Another App</li> 
<li><a href="">Launch</a> <a href="">Info</a></li> 

<li class="mainAppList">Yet Another App</li> 
<li><a href="">Launch</a> <a href="">Info</a></li> 

<li class="mainAppList">Yet Another App</li> 
<li><a href="">Launch</a> <a href="">Info</a></li> 

</ul> 
</div> 

<div class="appsHolderExpander"> 
<a href="" class="more">More <img src="/wps/PA_applicationsintros/./img/downArrow.png" /></a> 
<a href="" class="less">Less <img src="/wps/PA_applicationsintros/./img/upArrow.png" /></a> 
</div> 

</div> 

<div class="appsHolderAdvertising"> 

<div class="appsHolderBody"> 
<h5 class="appTitle">Advertising Apps</h5> 
<ul class="appsList"> 

<li class="mainAppList">ATEX</li> 
<li><a href="">Launch</a> <a href="">Info</a></li> 



</ul> 
</div> 

<div class="appsHolderExpander"> 
<a href="" class="more">More <img src="/wps/PA_applicationsintros/./img/downArrow.png" /></a> 
<a href="" class="less">Less <img src="/wps/PA_applicationsintros/./img/upArrow.png" /></a> 
</div> 



</div> 

歡呼提前

Answer 1

仍在等待您的答覆評論，但我重構了一點...

$(function() { 
    $(".less").hide(); 
    $(".more").each(function() { 
     if ($(this).parents('.appsList').height() < 150) 
      $(this).hide(); 
    }); 

    $(".more").click(function() { 
     var paragraphHeight = $(this).parents('.appsList').height(); 
     if (paragraphHeight > 150) { 
      $(this).parents('.appsHolderBody').animate({height:(paragraphHeight + 100)}); 
      $(this).hide('slow'); 
      $(this).parent().find('.less').show(); 
     } 
     return false;  
    }); 

    $(".less").click(function() { 
     $(this).parents('.appsHolderBody').animate({height:190 }); 
     $(this).hide('slow'); 
     $(this).parent().find('.more').show(); 
     return false; 
    }); 

}); 

Answer 2

HTML定義引用的DIV的標準方式。例如，將所有遵循此規則的div放入ID =「heightCheckingDivs」的另一個DIV中。

通過此集合中的DIV循環，並執行上面的操作。如果需要，添加該類，否則保持不變。爲了讓自己更容易，請定義一個包含外觀信息的普通類，以及另外兩個應用所需樣式的類，以便在添加的情況下使用。更多或更少。