Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.02.2013, 21:24
Интересующийся
Отправить личное сообщение для someone Посмотреть профиль Найти все сообщения от someone
 
Регистрация: 25.09.2012
Сообщений: 21

Помогите отфильтровать элементы. 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=Вспомогательные инструменты]

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

Последний раз редактировалось someone, 06.02.2013 в 21:26.
Ответить с цитированием
  #2 (permalink)  
Старый 06.02.2013, 21:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

someone,
кавычки
var filtered_elements = elements.filter('details[class="'+String(selected_category)+'"]');


'Вспомогательные инструменты' на пробеле без них улетает
Ответить с цитированием
  #3 (permalink)  
Старый 06.02.2013, 21:38
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

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

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

Кароче проще графически пояснить: блоки, в них ссылки - что берем - куда кладём
Ответить с цитированием
  #4 (permalink)  
Старый 06.02.2013, 21:57
Интересующийся
Отправить личное сообщение для someone Посмотреть профиль Найти все сообщения от someone
 
Регистрация: 25.09.2012
Сообщений: 21

рони, спасибо

Deff, могу выложить полный html шаблон? но там с django-тэгами.
Задачу переформулирую попозже. Сегодня мозг уже выдал сверх нормы.
Ответить с цитированием
  #5 (permalink)  
Старый 06.02.2013, 21:59
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Сообщение от someone
Deff, могу выложить полный html шаблон? но там с django-тэгами.
Лучше по контрл+U из браузера (Или просто ссылку
Ответить с цитированием
  #6 (permalink)  
Старый 07.02.2013, 16:18
Интересующийся
Отправить личное сообщение для someone Посмотреть профиль Найти все сообщения от someone
 
Регистрация: 25.09.2012
Сообщений: 21

Вот страничка.
<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">? Впринципе я и сам могу потихоньку разобраться, но за подсказку и помощь буду длагодарен.

Последний раз редактировалось someone, 07.02.2013 в 16:20.
Ответить с цитированием
  #7 (permalink)  
Старый 07.02.2013, 16:57
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,201

someone, начнем с того что так

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

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

Вёрстку меняй однозначно!
Ответить с цитированием
  #8 (permalink)  
Старый 07.02.2013, 17:10
Интересующийся
Отправить личное сообщение для someone Посмотреть профиль Найти все сообщения от someone
 
Регистрация: 25.09.2012
Сообщений: 21

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

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

Последний раз редактировалось someone, 07.02.2013 в 17:34.
Ответить с цитированием
  #9 (permalink)  
Старый 07.02.2013, 18:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

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>
Ответить с цитированием
  #10 (permalink)  
Старый 07.02.2013, 23:43
Интересующийся
Отправить личное сообщение для someone Посмотреть профиль Найти все сообщения от someone
 
Регистрация: 25.09.2012
Сообщений: 21

рони, спасибо почти работает) дальше сам разберусь...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выбрать элементы, в которые вложен элемент с id. Вадимчег jQuery 3 24.11.2012 10:38
Помогите с присвоением класса в цикле tony_m Элементы интерфейса 2 12.11.2012 13:47
Помогите со скроллом Дмитрий888 Элементы интерфейса 3 10.02.2012 15:24
помогите понять jquery Xaver jQuery 0 13.04.2011 13:25
Помогите новичку с выпадающим списком interest Элементы интерфейса 5 19.05.2010 13:15