0

Поздравляю всех с наступившем Новым Годом!

Ребята, такой вопрос. Есть простецкий скрипт

<script>
$(document).ready(function(){
    $("a.delete").live("click", function(){
        var news_id = $(this).attr("id"), news_url = $(this).attr("href");

        $.ajax({
            url: news_url,
            success: function(data){
                $('li.'+news_id).fadeOut("slow");
            }
        });
        return false;
    });
});
</script>

Как тут можно сделать, чтобы если нет в списке ul больше li, то выводить после удаления последней новости "Новостей нет". Весь блок со списком новостей находится в диве <div class="news_list"></div> можно в него выводить или добавлять li с этим текстом.

Собственно проверку на дочерние элементы я находил. Несколько вариантов, но вот как использовать их в контексте с этим скриптом - не понял.

0

3 ответа 3

3

Раз пошла такая пьянка, то и я вставлю свои пять копеек. )) В своем примере я не делал получение url и id новости, а просто хотел показать, что нет смысла после каждого клика, шерстить DOM и пересчитывать оставшиеся элементы. Достаточно получить их кол-во один раз при загрузке, и просто манипулировать с этой переменной.

3
  • Вот интересно всегда была? А что будет от того что мы будем шерстить весь DOM? Эта необходимо когда работает анимация типа - sotmarket.ru/2013
    – Oleg
    9 янв 2013 в 10:33
  • @exec, я считаю, даже в тех анимациях можно без "шерстения" обойтись. Прежде всего, браузеру - меньше работы. А это означает, что и тормозов меньше будет. Кстати... @Deonis, у меня была идея также сделать, но я, честно говоря, забил))
    – Dobby007
    9 янв 2013 в 10:49
  • Deonis, спасибо большое!
    – drop_off
    10 янв 2013 в 8:08
3
$(document).ready(function(){
    $("a.delete").live("click", function(){
        var news_id = $(this).attr("id"), news_url = $(this).attr("href"), elem;
        if ( !+(elem = $('div.news_list')).find('li').size() ) {
            elem.text('Новостей нет');
            return false;
        }
        $.ajax({
            url: news_url,
            success: function(data){
                $('li.'+news_id).fadeOut("slow");
            }
        });
        return false;
    });
});
10
  • 2
    Тут бы поправочки не помешали: 1. Рекомендуется вместо live(), bind(), delegate() использовать метод on(). Исключение: не хватает мозгов обновить библиотеку, как минимум до версии 1.7 2. Рекомендуется вместо size() использовать length 3. Рекомендуется указывать тип выполняемого запроса (GET или POST) 4. Настоятельно рекомендуется указывать тип данных, в котором ожидается получить ответ от сервера.
    – Deonis
    9 янв 2013 в 9:14
  • @Deonis, @exec применял ту версию, которую конкретно использует ТС. И я думаю что поправочки использовать лучше конкретно ТС'у.
    – Palmervan
    9 янв 2013 в 9:21
  • @Palmervan, да.
    – Oleg
    9 янв 2013 в 9:24
  • @Palmervan, я не обращался именно к @exec и без претензий к нему, а как бы в общем и целом. Просто эти "поправки", стоило бы указать в ответе. Только по этой причине, я комментировал тут.
    – Deonis
    9 янв 2013 в 9:27
  • @Deonis, согласен, правильно.
    – Oleg
    9 янв 2013 в 9:29
1

Предложу свой вариант...

Я так понимаю структура у вас такая:

<div class="news_list">
    <ul class="newslist">
        <li>some text <a href="/sdsf/sdfasdf" class="delete"></a></li>
        ...
    </ul>
    <div class="nonews">Новостей нет</div> //display: none
</div>

Тогда:

<script>
$(document).ready(function(){
    $("a.delete").live("click", function(e){ 
        var me = this, news_url = $(this).attr("href");
        e.preventDefault(); //для того, чтобы браузер не переходил по ссылке

        $.ajax({
            url: news_url,
            success: function(data){
                var li = $(me).parent().fadeOut("slow", function(){
                    if(li.siblings().size() == 0){
                        $('.news_list .nonews').show();
                    }
                    $(this).remove();
                });

            }
        });
        return false;
    });
});
</script>

Для jquery 1.7 и выше:

$(".news_list").on("click", '.delete', function(){...});
1
  • Dobby007, спасибо!
    – drop_off
    10 янв 2013 в 8:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.