Помогите отфильтровать элементы. 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,
кавычки
var filtered_elements = elements.filter('details[class="'+String(selected_category)+'"]');
'Вспомогательные инструменты' на пробеле без них улетает |
var List=$(".bookmarks_list a.btn btn-info lead"); //Лист всех ссылок
1. Непонятно на что жать 2. Непонятно закладки из одного блока закладок выводить или из всех 3. вывести его в блок <div class="bookmarks_list"> заменив старые блоки. Непонятно, критерий старости Кароче проще графически пояснить: блоки, в них ссылки - что берем - куда кладём |
рони, спасибо
Deff, могу выложить полный html шаблон? но там с django-тэгами. Задачу переформулирую попозже. Сегодня мозг уже выдал сверх нормы. |
Цитата:
|
Вот страничка.
<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, начнем с того что так
<ol> <li>...</li> <details /> <br /> <li>...</li> <details /> <br /> </ol> не делается... Вёрстку меняй однозначно! |
А как делается? поменять не проблема.
Вам видимо просто лень написать) главное тыкнуть носом же P.S.: у меня подключен bootstrap и сейчас всё меняется в вёрстке, главным образом работа с данными на клиенте/сервере, отсюда и пляшу. Как писал выше JS/JQuery только начал... |
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>
|
рони, спасибо почти работает) дальше сам разберусь...
|
Цитата:
Отступы с использованием <br /> это вообще нечто! Для этого есть свойства ЦСС. |
| Часовой пояс GMT +3, время: 04:23. |