Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Помогите отфильтровать элементы. JQuery. (https://javascript.ru/forum/misc/35305-pomogite-otfiltrovat-ehlementy-jquery.html)

someone 06.02.2013 21:24
Помогите отфильтровать элементы. JQuery.
 
Здравствуйте. Только сел за изучения JS/JQuery. Основной профиль у меня python/django.
Начал с простенкой задачки. На страницу выгружаются блоки закладок, во например:
<div class="span9 bookmarks_list">
            
                
                    <div class="div_bookmark">
                    <a class="thumbnail" href="http://translate.google.ru/">http://translate.google.ru/</a>
                    
                    <h6><a href="/bookmarks/5/ " class="btn btn-info lead">Редактировать</a>
                        Приоритет:9 ||
                        Просмотрено: False ||
                        Публичная: True
                        <a href="/bookmarks/delete_bookmark/5" class="btn pull-right btn-mini btn-danger">удалить</a>
                        <details class="Вспомогательные инструменты"></details>
                    </h6><hr>
                    </div>
                
                    <div class="div_bookmark">
                    <a class="thumbnail" href="http://bootstrap.veliovgroup.com/index.php">http://bootstrap.veliovgroup.com/index.php</a>
                    
                        <pre>Bootstrap с переводом
</pre>
                    
                    <h6><a href="/bookmarks/7/ " class="btn btn-info lead">Редактировать</a>
                        Приоритет:9 ||
                        Просмотрено: False ||
                        Публичная: False
                        <a href="/bookmarks/delete_bookmark/7" class="btn pull-right btn-mini btn-danger">удалить</a>
                        <details class="Ресурсы для изучения материала"></details>
                    </h6><hr>
                    </div> 
        </div>


Их много. На этой же страничке есть категории(тэг <a>). Хочу по нажатию просто отфильтровать этот список закладок и вывести его в блок <div class="bookmarks_list"> заменив старые блоки.

Вот с чего начал(делаю пока просто функцию, без нажатия на кнопку), но при этом на ошибку нарвался:
function filterByCategory(selected_category) {
    var elements = $('div[class=div_bookmark]');
    var filtered_elements = elements.filter('details[class='+String(selected_category)+']');
    var result = '';
    for(var i=0;i<filtered_elements.length;i++) {
        result += filtered_elements[i].toString()+'\n';
    }
//    return alert(result)
//    return alert(elements.each(function(indx, elem) {console.log(elem)}))
    return alert(filtered_elements.each(function(indx, elem) {console.log(elem)}))
}

filterByCategory('Вспомогательные инструменты')

Выскакивает ошибка:
Error: Syntax error, unrecognized expression: details[class=Вспомогательные инструменты]

Подскажите, что не так написал?

рони 06.02.2013 21:37
someone,
кавычки 
var filtered_elements = elements.filter('details[class="'+String(selected_category)+'"]');


'Вспомогательные инструменты' на пробеле без них улетает

Deff 06.02.2013 21:38
var List=$(".bookmarks_list a.btn btn-info lead"); //Лист всех ссылок

1. Непонятно на что жать
2. Непонятно закладки из одного блока закладок выводить или из всех
3. вывести его в блок <div class="bookmarks_list"> заменив старые блоки.
Непонятно, критерий старости

Кароче проще графически пояснить: блоки, в них ссылки - что берем - куда кладём

someone 06.02.2013 21:57
рони, спасибо

Deff, могу выложить полный html шаблон? но там с django-тэгами.
Задачу переформулирую попозже. Сегодня мозг уже выдал сверх нормы.

Deff 06.02.2013 21:59
Цитата:
Сообщение от someone
Deff, могу выложить полный html шаблон? но там с django-тэгами.
Лучше по контрл+U из браузера (Или просто ссылку

someone 07.02.2013 16:18
Вот страничка. 
<div class="row">

        
        <div class="span3 offset1 categories_list">
            Категории:
            <ol>

                <li><a onclick="filterByCategory('ALL')" class="btn btn-info btn-small" >ALL</a></li>
                <br>
                
                    
                        <li><a onclick="filterByCategory('Ресурсы для изучения материала')" class="btn btn-info btn-small" >Ресурсы для изучения материала</a></li>
                        <details class="Ресурсы для изучения материала"></details>
                        <br>

                    
                        <li><a onclick="filterByCategory('Решение актуальных проблем')" class="btn btn-info btn-small" >Решение актуальных проблем</a></li>
                        <details class="Решение актуальных проблем"></details>
                        <br>

                    
                        <li><a onclick="filterByCategory('Вспомогательные инструменты')" class="btn btn-info btn-small" >Вспомогательные инструменты</a></li>
                        <details class="Вспомогательные инструменты"></details>
                        <br>

                    
                
            </ol>
        </div>

        
        <div class="span9 bookmarks_list">
            
                
                    <div class="div_bookmark">
                    <a class="thumbnail" href="http://translate.google.ru/">http://translate.google.ru/</a>
                    
                    <h6><a href="/bookmarks/5/ " class="btn btn-info lead">Редактировать</a>
                        Приоритет:9 ||
                        Просмотрено: False ||
                        Публичная: True
                        <a href="/bookmarks/delete_bookmark/5" class="btn pull-right btn-mini btn-danger">удалить</a>
                        <details class="Вспомогательные инструменты"></details>
                    </h6><hr>
                    </div>
                
                    <div class="div_bookmark">
                    <a class="thumbnail" href="http://bootstrap.veliovgroup.com/index.php">http://bootstrap.veliovgroup.com/index.php</a>
                    
                        <pre>Bootstrap с переводом
</pre>
                    
                    <h6><a href="/bookmarks/7/ " class="btn btn-info lead">Редактировать</a>
                        Приоритет:9 ||
                        Просмотрено: False ||
                        Публичная: False
                        <a href="/bookmarks/delete_bookmark/7" class="btn pull-right btn-mini btn-danger">удалить</a>
                        <details class="Ресурсы для изучения материала"></details>
                    </h6><hr>
                    </div>
                
                    <div class="div_bookmark">
                    <a class="thumbnail" href="http://twitter.github.com/bootstrap/index.html">http://twitter.github.com/bootstrap/index.html</a>
                    
                    <h6><a href="/bookmarks/3/ " class="btn btn-info lead">Редактировать</a>
                        Приоритет:7 ||
                        Просмотрено: False ||
                        Публичная: False
                        <a href="/bookmarks/delete_bookmark/3" class="btn pull-right btn-mini btn-danger">удалить</a>
                        <details class="Ресурсы для изучения материала"></details>
                    </h6><hr>
                    </div>
                
                    <div class="div_bookmark">
                    <a class="thumbnail" href="http://htmlbook.ru/">http://htmlbook.ru/</a>
                    
                    <h6><a href="/bookmarks/6/ " class="btn btn-info lead">Редактировать</a>
                        Приоритет:7 ||
                        Просмотрено: False ||
                        Публичная: False
                        <a href="/bookmarks/delete_bookmark/6" class="btn pull-right btn-mini btn-danger">удалить</a>
                        <details class="Ресурсы для изучения материала"></details>
                    </h6><hr>
                    </div>
                
                    <div class="div_bookmark">
                    <a class="thumbnail" href="http://djangoproject.com">http://djangoproject.com</a>
                    
                    <h6><a href="/bookmarks/1/ " class="btn btn-info lead">Редактировать</a>
                        Приоритет:5 ||
                        Просмотрено: False ||
                        Публичная: True
                        <a href="/bookmarks/delete_bookmark/1" class="btn pull-right btn-mini btn-danger">удалить</a>
                        <details class="Ресурсы для изучения материала"></details>
                    </h6><hr>
                    </div>
                
                    <div class="div_bookmark">
                    <a class="thumbnail" href="http://south.aeracode.org/">http://south.aeracode.org/</a>
                    
                    <h6><a href="/bookmarks/4/ " class="btn btn-info lead">Редактировать</a>
                        Приоритет:5 ||
                        Просмотрено: False ||
                        Публичная: False
                        <a href="/bookmarks/delete_bookmark/4" class="btn pull-right btn-mini btn-danger">удалить</a>
                        <details class="Ресурсы для изучения материала"></details>
                    </h6><hr>
                    </div>
                
                    <div class="div_bookmark">
                    <a class="thumbnail" href="http://www.michelepasin.org/blog/2010/07/20/the-power-of-djangos-q-objects/">http://www.michelepasin.org/blog/2010/07/20/the-power-of-djangos-q-objects/</a>
                    
                        <pre>Интересное разъяснение по использованию класса class Q в запросах для django.</pre>
                    
                    <h6><a href="/bookmarks/2/ " class="btn btn-info lead">Редактировать</a>
                        Приоритет:3 ||
                        Просмотрено: True ||
                        Публичная: True
                        <a href="/bookmarks/delete_bookmark/2" class="btn pull-right btn-mini btn-danger">удалить</a>
                        <details class="Ресурсы для изучения материала"></details>
                    </h6><hr>
                    </div>
                
            
        </div>
    </div>


Как по любой из ссылок блока <div class="span3 offset1 categories_list"> фильтровать содержимое блока <div class="span9 bookmarks_list">? Впринципе я и сам могу потихоньку разобраться, но за подсказку и помощь буду длагодарен.

ksa 07.02.2013 16:57
someone, начнем с того что так

<ol>
   <li>...</li>
   <details />
   <br />
   <li>...</li>
   <details />
   <br />
</ol>

не делается...

Вёрстку меняй однозначно!

someone 07.02.2013 17:10
А как делается? поменять не проблема.
Вам видимо просто лень написать) главное тыкнуть носом же

P.S.: у меня подключен bootstrap и сейчас всё меняется в вёрстке, главным образом работа с данными на клиенте/сервере, отсюда и пляшу. Как писал выше JS/JQuery только начал...

рони 07.02.2013 18:24
someone,
Возможный вариант ...
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
  <title></title>
  <style type="text/css">
.div_bookmark {
  display: none;
}
  </style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
$("a").on("click",function(){
var b = $(this).parent().next().attr('class')
if (b == 'ALL') {$('.div_bookmark').show()}
else {
$('.div_bookmark').hide();
$('details[class="'+b+'"]').parents('.div_bookmark').show();
}
})
});
</script>
</head>

<body>
<div class="row">
    <div class="span3 offset1 categories_list">Категории:
        <ol>
            <li>
                <a  class="btn btn-info btn-small">ALL</a>
            </li>
            <details class="ALL"></details>
            <br>
            <li>
                <a  class="btn btn-info btn-small">Ресурсы для изучения материала</a>
            </li>
            <details class="Ресурсы для изучения материала"></details>
            <br>
            <li>
                <a  class="btn btn-info btn-small">Решение актуальных проблем</a>
            </li>
            <details class="Решение актуальных проблем"></details>
            <br>
            <li>
                <a  class="btn btn-info btn-small">Вспомогательные инструменты</a>
            </li>
            <details class="Вспомогательные инструменты"></details>
            <br>
        </ol>
    </div>
    <div class="span9 bookmarks_list">
        <div class="div_bookmark">
            <a class="thumbnail" href="http://translate.google.ru/">http://translate.google.ru/</a>
             <h6><a href="/bookmarks/5/ " class="btn btn-info lead">Редактировать</a>
                        Приоритет:9 ||
                        Просмотрено: False ||
                        Публичная: True
                        <a href="/bookmarks/delete_bookmark/5" class="btn pull-right btn-mini btn-danger">удалить</a>
                        <details class="Вспомогательные инструменты"></details>
                    </h6>
            <hr>
        </div>
        <div class="div_bookmark">
            <a class="thumbnail" href="http://bootstrap.veliovgroup.com/index.php">http://bootstrap.veliovgroup.com/index.php</a> <pre>Bootstrap с переводом
</pre>

             <h6><a href="/bookmarks/7/ " class="btn btn-info lead">Редактировать</a>
                        Приоритет:9 ||
                        Просмотрено: False ||
                        Публичная: False
                        <a href="/bookmarks/delete_bookmark/7" class="btn pull-right btn-mini btn-danger">удалить</a>
                        <details class="Ресурсы для изучения материала"></details>
                    </h6>
            <hr>
        </div>
        <div class="div_bookmark">
            <a class="thumbnail" href="http://twitter.github.com/bootstrap/index.html">http://twitter.github.com/bootstrap/index.html</a>
             <h6><a href="/bookmarks/3/ " class="btn btn-info lead">Редактировать</a>
                        Приоритет:7 ||
                        Просмотрено: False ||
                        Публичная: False
                        <a href="/bookmarks/delete_bookmark/3" class="btn pull-right btn-mini btn-danger">удалить</a>
                        <details class="Ресурсы для изучения материала"></details>
                    </h6>
            <hr>
        </div>
        <div class="div_bookmark">
            <a class="thumbnail" href="http://htmlbook.ru/">http://htmlbook.ru/</a>
             <h6><a href="/bookmarks/6/ " class="btn btn-info lead">Редактировать</a>
                        Приоритет:7 ||
                        Просмотрено: False ||
                        Публичная: False
                        <a href="/bookmarks/delete_bookmark/6" class="btn pull-right btn-mini btn-danger">удалить</a>
                        <details class="Ресурсы для изучения материала"></details>
                    </h6>
            <hr>
        </div>
        <div class="div_bookmark">
            <a class="thumbnail" href="http://djangoproject.com">http://djangoproject.com</a>
             <h6><a href="/bookmarks/1/ " class="btn btn-info lead">Редактировать</a>
                        Приоритет:5 ||
                        Просмотрено: False ||
                        Публичная: True
                        <a href="/bookmarks/delete_bookmark/1" class="btn pull-right btn-mini btn-danger">удалить</a>
                        <details class="Ресурсы для изучения материала"></details>
                    </h6>
            <hr>
        </div>
        <div class="div_bookmark">
            <a class="thumbnail" href="http://south.aeracode.org/">http://south.aeracode.org/</a>
             <h6><a href="/bookmarks/4/ " class="btn btn-info lead">Редактировать</a>
                        Приоритет:5 ||
                        Просмотрено: False ||
                        Публичная: False
                        <a href="/bookmarks/delete_bookmark/4" class="btn pull-right btn-mini btn-danger">удалить</a>
                        <details class="Ресурсы для изучения материала"></details>
                    </h6>
            <hr>
        </div>
        <div class="div_bookmark">
            <a class="thumbnail" href="http://www.michelepasin.org/blog/2010/07/20/the-power-of-djangos-q-objects/">http://www.michelepasin.org/blog/2010/07/20/the-power-of-djangos-q-objects/</a> <pre>Интересное разъяснение по использованию класса class Q в запросах для django.</pre>

             <h6><a href="/bookmarks/2/ " class="btn btn-info lead">Редактировать</a>
                        Приоритет:3 ||
                        Просмотрено: True ||
                        Публичная: True
                        <a href="/bookmarks/delete_bookmark/2" class="btn pull-right btn-mini btn-danger">удалить</a>
                        <details class="Решение актуальных проблем"></details>
                    </h6>
            <hr>
        </div>
    </div>
</div>
</body>

</html>

someone 07.02.2013 23:43
рони, спасибо почти работает) дальше сам разберусь...


Часовой пояс GMT +3, время: 08:23.
Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице