Получить порядковый номер элемента в контейнере.

admin — Wed, 12 May 2010 04:31:04 +0000

ПРИМЕР: Получение порядкового номера LI в списке UL с классом .class

  qIndex = $('ul  li').index('li.class');

ПРИМЕР: Получение порядкового номера LI в списке UL по клику на него

 <ul>
    <li>oneli>
    <li>twoli>
    <li>threeli>
 ul>
 
 $('ul li').click(function(el){
	        qIndex = $('ul  li').index(this);
                alert(qIndex);	  
	  });

jQuery селекторы, которые я часто использую.

admin — Mon, 01 Mar 2010 06:46:41 +0000

:eq – Получение элемента по порядковому номеру. Нумерация элементов начинается с 0

jQuery(':eq(index)')  // index порядковый номер элемента, который нужно получить.
//пример применения
jQuery(':eq(index)') 
jQuery('.class:eq(5)')  // получает 6й элемент из всех элементов с классом class

:not – Исключение элементов

jQuery('el:not(selector)')  // selector - селектор, класс или ID, который нужно исключить
//пример применения
jQuery('h1:not(.class)')  // ссылается на все элементы h1 с классом не равным '.class'

Аккардеон на jQuery – мини Плагин

adminRantie — Sun, 19 Jul 2009 11:00:30 +0000

Существует куча слайдеров и аккардеонов, но они все требуют подключения больших кусков кода, плагина како-нить немаленького или дополнения к библиотеке, ядро эффектов.

Я решил написать свой очень маленький аккардон.

Вот что получилось. Cмотреть

Для того чтобы у вас заработало нужно сделать следующее.

1) подключить jQuery библиотеку.

1	<script language="javascript" type="text/javascript" src="/scripts/jquery-1.2.6.js">script>

2) Если у вас установлена какая-то еще библиотека, то возможны конфликты с jQuery, чтобы этого избежать делаем так.

  <script language="javascript" type="text/javascript" src="/scripts/jquery-1.2.6.js">script>
<script type="text/javascript" language="javascript" >
jQuery.noConflict();
script>

Теперь конфликтов нет, чтобы работало все таким образом значки $ в нашем коде jQuery заменяем на jQuery.

3) Создаем блоки с классом “acc”, внутри которых будут по одному заголовку, на который мы будем жать для отображения скрытого содержимого с классом acc-h2, и само содержимое acc-div.

 <div class="acc"> 
	   <h2 class="acc-h2">1 Заголовокh2>
	   <div class="acc-div">
	    <p>
		   Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

2 Заголовок

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. p> div> div>

4) Прописываем классы для всех элементов если будете менять имена, незабудте их поменять в jQuery коде.

.opened – это класс для открытого Заголовка
.acc-h2 – это класс для закрытого
.acc-div – класс для контента

RantieV » jQuery

Получить порядковый номер элемента в контейнере.

jQuery селекторы, которые я часто использую.

Аккардеон на jQuery – мини Плагин

2 Заголовок