Сортировка div на jquery
Здравствуйте всем, перерыл весь интернет, но подобной сортировки не нашел. Все которые удалось найти работают очень криво или вообще не работают. Есть код
<select id="ids">
<option value="#" selected>все</option>
<option value="id1" >id1</option>
<option value="id2" >id2</option>
<option value="id3" >id3</option>
<option value="id4" >id4</option>
</select>
<select id="langs">
<option value="#" selected>все</option>
<option value="lang1" >lang1</option>
<option value="lang2" >lang2</option>
<option value="lang3" >lang3</option>
<option value="lang4" >lang4</option>
</select>
<select id="procs">
<option value="#" selected>все</option>
<option value="proc1" >proc1</option>
<option value="proc2" >proc2</option>
<option value="proc3" >proc3</option>
<option value="proc4" >proc4</option>
</select>
<div id='d-contents'>
<div class="id1 lang3 proc2"> <a href="###" ><img src="###.jpg"/></a> <a href="###">Зоголовок</a> <div>текст</div></div>
<div class="id2 lang2 proc4"> <a href="###" ><img src="###.jpg"/></a> <a href="###">Зоголовок</a> <div>текст</div></div>
<div class="id3 lang1 proc4"> <a href="###" ><img src="###.jpg"/></a> <a href="###">Зоголовок</a> <div>текст</div></div>
и еще сотня подобных дивов с разными параметрами в class...
</div>
может кто подскажет как реализовать сортировку div элементов в зависимости от выбора select-ов, чтобы изначально на странице были все дивы, но если выбрать например в select id="ids" option value="id3" то на странице остались бы только те div в классе которых есть id3, думаю понятно, желательно, чтобы селекты не мешали друг другу. Если кто поможет , большое спасибо. |
<script src="http://code.jquery.com/jquery-latest.js"></script>
<select class="selec" id="ids">
<option value="#" selected>все</option>
<option value="id1" >id1</option>
<option value="id2" >id2</option>
<option value="id3" >id3</option>
<option value="id4" >id4</option>
</select>
<select class="selec" id="langs">
<option value="#" selected>все</option>
<option value="lang1" >lang1</option>
<option value="lang2" >lang2</option>
<option value="lang3" >lang3</option>
<option value="lang4" >lang4</option>
</select>
<select class="selec" id="procs">
<option value="#" selected>все</option>
<option value="proc1" >proc1</option>
<option value="proc2" >proc2</option>
<option value="proc3" >proc3</option>
<option value="proc4" >proc4</option>
</select>
<div id='d-contents'>
<div class="id1 lang3 proc2"> <a href="###" ><img src="###.jpg"/></a> <a href="###">Заголовок</a> <div>текст</div></div>
<div class="id2 lang2 proc4"> <a href="###" ><img src="###.jpg"/></a> <a href="###">Заголовок</a> <div>текст</div></div>
<div class="id3 lang1 proc4"> <a href="###" ><img src="###.jpg"/></a> <a href="###">Заголовок</a> <div>текст</div></div>
и еще сотня подобных дивов с разными параметрами в class...
</div>
<script type="text/javascript">
var first=true;
$("select.selec").change(function () {
var a='';
$("select.selec").each(function () {
a+=$(this).val();
});
if(a=='###'){
$("#d-contents > div").show();
first=true;
return false;
}
if(first){first=false; $("#d-contents > div").hide();}
var a = $(this).val();
$("#d-contents > div."+a).show();
});
</script>
|
Deff, спасибо за помощь, но работает не корректно. Если выбрать id1 - на странице останется только он, но если затем выбрать id2 то на странице будет див и с id1 и id2 + если выбрать id1 а в другом селекте lang1 то на странице будут все дивы с lang1 и перестанет учитываться выбор id1 в первом селекте
|
werty1001,
Приведите несколько примеров типа: вид селектора => вид выходных классов у div(ов) |
Цитата:
$('select').change(function(){
var class_name = $(this).val();
$('#d-contents div').each(function(){
if($(this).hasClass(class_name))
$(this).show();
else
$(this).hide();
});
});
а чтобы исправить это Цитата:
var class_name1 = $('#select1'/*выборка для нахождения нужных селектов*/).val()
...
var cass_name2 = ...
...
if($(this).hasClass(class_name1) or $(this).hasClass(class_name2))
но тк я в js ноль, может вы подскажите как будет выглядеть полный код |
| Часовой пояс GMT +3, время: 16:54. |