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, я знаю, что это не очень красиво, но по какой-то причине не могу заставить его работать с использованием 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, которые следуют этому правилу, в другой DIV с ID = "heightCheckingDivs".

Просмотрите все DIV в этой коллекции и делайте то, что вы делаете выше. При необходимости добавьте класс, иначе оставьте его в покое. Чтобы упростить себе задачу, определите общий класс, который содержит информацию о внешнем виде, и еще два класса, которые применяют стили, которые вам нужны в случаях, которые вы добавляете .more или .less