jQuery упорядоченный список. Оформляем и реализуем счетчик
Кодировать последовательные элементы весьма утомительно, не правда ли? Однако существует простой решение. В этой статье будет показано, как при помощи jquery добавить элементам списка соответствующие классы так, чтобы создать основанный на изображениях упорядоченный список. Во втором примере вы увидите, как можно при помощи метода prepend
добавить счетчик для комментариев.
1a. Вставляем jquery код
Во-первых, скачайте последнюю версию jquery. Затем в тег head
вставьте следующий код.
JQuery
// подключаем jQuery
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//i - индекс текущего элемента в наборе Query (начиная с 0)
$("#step li").each(function (i) {
i = i+1;
$(this).addClass("item"+i);
});
});
</script>
На выходе jQuery преобразует список следующим образом:
1b. CSS код
Индивидуальный стиль каждого элемента списка определяется при помощи фонового изображения (step1.png, step2.png, step3.png, и т.д ).
CSS
#step .item1 {
background: url(step1.png) no-repeat;
}
#step .item2 {
background: url(step2.png) no-repeat;
}
#step .item3 {
background: url(step3.png) no-repeat;
}
2a. Упорядоченный контент
Данную технику можно использовать одновременно с методом prepend
. Метод prepend
позволяет добавить HTML-код внутрь выбранного элемента, но перед кодом, который уже есть. Следующий пример показывает, как можно добавить счетчик для списка с комментариями.
JQuery
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#commentlist li").each(function (i) {
i = i+1;
$(this).prepend('<span class="commentnumber"> #'+i+'</span>');
});
});
</script>
На выходе в каждый тег li
будет добавлен тег span
с соответствующим номером.
2b.CSS
Элемент li
следует позиционировать относительно (position:relative
), тег span
– абсолютно (position:absolute
) (верхний правый уол).
CSS
#commentlist li {
position: relative;
}
#commentlist .commentnumber {
position: absolute;
right: 0;
top: 8px;
}
источник
Комментарии к статье