Селектори jQuery: як використовувати?

Кучер В.Г.

Вибір елементів по ієрархії

Даний метод абсолютно ідентичний селекторам з CSS. Він дозволяє вибрати елементи, в залежності від їх положення відносно споріднених елементів у структурі DOM. Тут краще відразу розбирати селектори jquery на прикладах.

Приклад селектора Опис селектора
$(“ul > li”) Вибирає всі елементи з тегом

  • , які є прямими нащадками (дітьми)
      • $(“ul a”) Вибирає всі елементи з тегом , які є нащадками будь-якого рівня для

        $(“h1 + p”) Вибирає братський елемент з тегом

        , що йде відразу за

        $(“li ~ a”) Вибирає елемент з тегом , який слід відразу за

      • , однак тут вони можуть не бути братськими, але повинні мати спільного предка
        		•
        $(“li:first-child”) Вибирає елемент з тегом

      • , який є першим дитиною свого батька, наприклад,
          • $(“li:last-child”) Вибирає елемент з тегом

        • , який є останньою дитиною свого батька, наприклад,
            • $(“li:nth-child(3)”) Вибирає елемент з тегом

          • , який є третьою дитиною свого батька. Замість трійки, звичайно ж, можна використовувати будь-яке інше число
            		•
            $(“li:only child”) Вибирає ті елементи з тегом

          • батько яких має тільки прямих нащадків (дітей)
            		•

            Окремо варто поговорити про jquery селекторі li:nth-child(n), адже він дозволяє задавати не тільки конкретні числа. Так він може вибирати усі парні елементи, якщо замість n задати константу even, або непарні, задавши odd. Замість n також можна використовувати вираз, наприклад, $(“li:nth-child(2n+3)”) буде вибирати кожен другий елемент, починаючи свій відлік з третього прямого нащадка.

            Цікаве:  Поштові програми для Windows: огляд
            Сторінка: 1 2 3 4 5 6 7 8