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定位父母时，我知道它不漂亮，但由于某种原因无法使用eq（4）运行。

因此主要问题在于这部分代码

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

它隐藏了所有元素$（“。more”）而不是匹配条件的元素。

按要求提供的HTML

<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

定义引用DIV的标准方法。例如，将所有遵循此规则的div放在ID =“heightCheckingDivs”的另一个DIV中。

循环浏览此集合中的DIV并执行上述操作。如果需要，添加类，否则不管它。为了方便自己，可以定义一个包含外观信息的公共类，另外两个类在您添加的情况下应用所需的样式.more或.less

每个函数的jquery

2 个答案: