每个功能的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循环，并执行上面的操作。如果需要，添加该类，否则保持不变。为了让自己更容易，请定义一个包含外观信息的普通类，以及另外两个应用所需样式的类，以便在添加的情况下使用。更多或更少。