JQuery условно для каждого - PullRequest
Новая
       5

JQuery условно для каждого

0 голосов
/ 19 июля 2011

У меня есть эта функция JQuery: 

$(document).ready(function() {
    $("div.descript_long").each(function() { 
        var descript_length = $("div.descript_long").text().length;

        if(descript_length < 160)
        $(this).next().("a.toggle_more").attr('style','display:none');
    else
        $(this).next().("a.toggle_more").removeAttr("style");

    });
});

На этой странице есть несколько элементов div с классом descript_long.Я хочу, чтобы эта функция проходила каждый и для каждого, если длина текста в div меньше 160, я хочу, чтобы следующий a с классом toggle_more был скрыт, установив стиль для отображения: none.В противном случае я не хочу, чтобы что-то происходило.

Это примерный div (которых их несколько): 

<div class="descript_short" dir="">
test
<a class="toggle_more" href="#">show more</a>
</div>
<div class="descript_long" dir="" style="display:none">
test
<a class="toggle_less" href="#">show less</a>
</div>

Так что моя проблема в том, что он просто ничего не делает.Я надеюсь, что это ошибка синтаксиса.Но, возможно, я неправильно написал функцию, и она не выражает то, что я на самом деле хочу, чтобы она делала.Другой набор глаз, проверяющих это, был бы очень признателен.

Ответы [ 4 ]

1 голос
/ 19 июля 2011

Ваш .next() вызов прерван. Это для тестирования братьев и сестер, а не дочерних узлов.

Попробуйте: 

$(document).ready(function() {
    $("div.descript_long").each(function() { 
       var descript_length = $(this).text().length;

        if(descript_length < 160) {
            $(this).find("a.toggle_more").first().hide();
        } else {
            $(this).find("a.toggle_more").first().show();
        }
    });
});

РЕДАКТИРОВАТЬ изначально имел .nextAll() вместо find, поскольку я неправильно прочитал разметку ОП.

1 голос
/ 19 июля 2011

Я думаю, что ваш код на самом деле не ищет следующий элемент a, так как элементы a находятся внутри найденных элементов div, вы можете использовать .find() для этой цели. Тогда вы должны использовать .hide() и .show() вместо непосредственного применения стиля самостоятельно, или даже лучше добавить и удалить определенный вами класс css, который установит display:none для элемента. 

$(document).ready(function() {
    $("div.descript_long").each(function() { 
        var descript_length = $("div.descript_long").text().length;

        if(descript_length < 160)
        $(this).find("a.toggle_more").hide();
    else
        $(this).find("a.toggle_more").show();

    });
});
0 голосов
/ 19 июля 2011

Попробуйте это 

$(document).ready(function() {
    $("div.descript_long").each(function() { 
       $(this).nextAll("a.toggle_more").css({display: ($(this).text().length < 160)?"none":"block"});
    });
});
0 голосов
/ 19 июля 2011

Попробуйте использовать «this» для текста и используйте find. 

$(document).ready(function() {     
    $("div.descript_long").each(function() {          
        var descript_length = $(this).text().length;
        if(descript_length < 160)         
           $(this).next().find("a.toggle_more").attr('style','display:none');     
        else         
           $(this).next().find("a.toggle_more").removeAttr("style");     
    }); 
});

EDITED TO ADD FIND.

...