Селектор «: first/last-child» (и фактически все «дочерние» селекторы) учитывают все дочерние элементы, даже те, которые не используют тег, который вы пытаетесь фильтровать.

Итак, работает, потому что в этом случае якорь является последним.

Однако не работает, потому что вход является первым потомком.

Вы можете использовать , но это приведет к тому, что все теги привязки будут не последним, поэтому, если у вас есть три, они будут выбирать первые два, и если у вас есть другой элемент после последнего привязки, он выберет все анкеры.

Или вы можете использовать , но, конечно, здесь он опирается на тот факт, что первый якорь является 2-м ребенком, поэтому, если вы удаляете входные элементы или добавляете больше элементов перед первым якорем, тогда он выигрывает работа.

(Вы можете думать, что дочерние селекторы имеют более высокий приоритет, чем селектор тегов. Таким образом, он сначала отфильтровывает дочерние элементы, независимо от тега или класса, а затем он смотрит на какой тег вы хотите. и странно, я знаю:))

Материал из JQuery

Перейти к: навигация, поиск

<< Селекторы

someSelector:first1.0

Соответствует первому элементу, из всех выбранных с помощью селектора someSelector. Эквивалентен селектору .

jQuery — Поиск первого элемента в наборе first()

Примеры использования:

$(‘div:first’)	вернет первый div-элемент на странице.
$(‘.lBox:first’)	вернет первый элемент с классом lBox.
$(‘div[title]:first’)	вернет первый div-элемент содержащий атрибут title.

Рассматриваемый селектор является надстройкой библиотеки jQuery, а не частью официальной css спецификации (как большинство других селекторов). Поэтому, при поиске, jQuery не сможет использовать быструю нативную функцию . В связи с этим, для улучшения производительности рекомендуется в начале сузить круг искомых элементов, и уже среди них выбрать первый элемент, воспользовавшись методом :

// сузим круг поиска до всех элементов с классом some-hint // и уже среди них выделим первый $( ‘.some-hint’ ).filter( ‘:first’ );

В действии

Найдем первого парня на деревне (первый элемент с классом man, находящийся внутри элемента village):

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src=»https://steptosleep.ru/wp-content/uploads/2018/06/41888.jpg»~gt~~lt~/script~gt~ ~lt~style~gt~ body{ text-align:center } .village{ display: block; float: left; padding: 15px; margin: 5px; background-color: #eeffee; color:#888; } span{ display: block; width: 70px; height: 70px; float: left; padding: 7px; margin: 8px; background-color: #EEEEEE; font-size: 14pt; color:black; } ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~span class=»man»~gt~Василий~lt~/span~gt~ ~lt~span class=»dog»~gt~Жучка~lt~/span~gt~ ~lt~div class=»village»~gt~ ~lt~b~gt~Деревня~lt~/b~gt~~lt~br~gt~ ~lt~span class=»dog»~gt~Рекс~lt~/span~gt~ ~lt~span class=»man»~gt~Ибрагим~lt~/span~gt~ ~lt~span class=»man»~gt~Николай~lt~/span~gt~ ~lt~/div~gt~ ~lt~script~gt~ $(‘.village .man:first’) .css(‘border’, ‘3px solid red’); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

Пример 2

Найдем и выделим первый -элемент и пометим его синей звездочкой. Кроме того, найдем все элементы , которые лежат первыми внутри своих родителей и выделим их красной рамкой:

~lt~!DOCTYPE~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8″ /~gt~ ~lt~script src=»https://steptosleep.ru/wp-content/uploads/2018/06/41888.jpg»~gt~~lt~/script~gt~ ~lt~style~gt~ body{ font:10pt Arial,sans-serif; color:#555; } ul{ float:left; margin:3px; margin-left:15px; padding:10px 10px 5px 10px; border:2px solid #ddd; } ul.matched{ background:url(‘/tags/images/matched.png’) 0% 2% no-repeat; } ul.result{ position:relative; left:-3px; border:3px solid #ff8888; } li{ position:relative; float:left; margin:7px; padding:2px; width:60px; height:60px; background-color:#e1e1e1; border:2px solid #e1e1e1; } li.matched{ background:#e1e1e1 url(‘/tags/images/matched.png’) 5% 5% no-repeat; } li.result{ margin-left:6px; margin-right:6px; width:60px; height:60px; border:3px solid #ff8888; } p{ position:relative; float:left; width:16px; height:16px; margin:2px; background-color:#f4f4f4; font-size:1pt; } p.matched{ background:#f4f4f4 url(‘/tags/images/matched_mini.png’) center no-repeat; } p.result{ width:12px; height:12px; border:2px solid #ff8888; } .matched_addit{ background:#f4f4f4 url(‘/tags/images/matched_mini.png’) center no-repeat; } .srce{ padding:16px 0; text-align:center; } .srce tt{ color:#0088ff; } .tgName{ position:absolute; top:11px; left:45%; font-size:8pt; color:#b2ada1; } li .tgName{ top:24px; left:18px; } li p .tgName{ top:0; left:1px; font-size:7pt; } .top-element{ padding-top:20px; } .clear{clear:both} ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~tt class=»tgName»~gt~‹ul›~lt~/tt~gt~ ~lt~ul~gt~ ~lt~li~gt~~lt~tt class=»tgName»~gt~‹li›~lt~/tt~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~tt class=»tgName»~gt~‹p›~lt~/tt~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~div class=»clear» /~gt~ ~lt~/ul~gt~ ~lt~ul~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~/li~gt~ ~lt~li~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~/li~gt~ ~lt~div class=»clear» /~gt~ ~lt~/ul~gt~ ~lt~ul~gt~ ~lt~li~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~div class=»clear» /~gt~ ~lt~/ul~gt~ ~lt~div class=»clear top-element»~gt~~lt~p class=»matched_addit»~gt~~lt~/p~gt~ – выбранные с помощью :first p-элементы.~lt~/div~gt~ ~lt~div class=»clear»~gt~~lt~p class=»result»~gt~~lt~/p~gt~ – выбранные с помощью :first-child p-элементы.~lt~/div~gt~ ~lt~script~gt~ $(‘ul p:first-child’).addClass(‘result’); $(‘ul p:first’).addClass(‘matched’); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

Ссылки

Предположим, что на странице располагается вот такая структура:

<ul> <li class=»level»> <ul> <li>Уровень 1</li> <li>Уровень 1</li> </ul> </li> <li class=»level»> <ul> <li>Уровень 2</li> <li>Уровень 2</li> </ul> </li> </ul>

Задача в том, чтобы при клике по элементу с классом «level» вложенные в него списки, по клику, то появлялись, то исчезали.

Выглядит это вот так:

Вся трудность здесь заключается в выборе элемента ul именно у того элемента li, по которому произведен клик.

Первый найденный элемент

Если бы у них были разные классы, то здесь особых проблем бы не было. Вся трудность в том, что классы одинаковые.

С такой задачей можно часто сталкиваться, когда какая-то информация на веб-странице у вас выводится в цикле и изменять для него имя класса не всегда хорошая идея.

Итак, для того, чтобы решить эту задачу, нужно воспользоваться селектором this и следующими операторами:

$(«.level»).on(«click», function() { $(this).find(‘ul’).toggle(‘slow’); });

можно также написать так:

$(«.level»).on(«click», function() { $(this,’ul’).toggle(‘slow’); });

либо вы можете использовать такую форму записи.

$(«.level»).on(«click», function() { $(this).children(‘ul’).toggle(‘slow’); });

Кстати, хотите узнать есть ли смысл в каком-то элементе на вашем сайте с помощью «целей» Яндекс Метрики и Google Analytics?

Уберите то, что НЕ работает, добавьте то, что работает и удвойте вашу выручку.

Курс по настройке целей Яндекс Метрики..

Курс по настройке целей Google Analytics..

Такая полезная библиотека как jQuery, иногда кажется излишней, загрузить большую библиотеку для того что бы стащить простые вещи, как добавление обработчика события или переключение класса. С многими нативными методами, которые теперь доступны и будучи намного быстрее, самое лучшего времени чтобы отойти от jQuery на некоторое время и изучить некоторые родные эквиваленты.

В следующей серии постов я покажу вам полезные фрагменты кода, которые позволяют делать теже манипуляции, для которых вы обычно используете jQuery без необходимости, добавив еще 80 Кб+ на свою страницу. Каждая запись покажет jQuery метод с соответствующим нативным методом. Посты не будут раскрывать все моменты как учебные пособия, но следует рассматривать их в качестве краткого справочного руководства.

Часть 2: Работа с атрибутами и свойствами

Часть 3: Обработчики событий

Часть 4: Создание, вставка, перемещение и удаление элементов

Этот пост будет посвящен множеству методов для выбора DOM элементов.

Получить элемент по его ID

jQuery

Нативный JS

Обратите внимание, что jQuery метод возвращает объект, в то время как нативные версии возвращают узел DOM дерева.

Получить элементы по имени тега (tagName)

jQuery

Нативный JS

Получить элементы по имени класса (className)

jQuery

Нативный JS

Обратите внимание, что, как и jQuery метод, и оба принимают строковой CSS3 селектор.

Другой важный момент это — что все методы в примерах выше начинают свой поиск с вершины DOM дерева, которые не могут быть эффективны при работе с тонной DOM узлов.

Поиск первого элемента в наборе

Однако мы можем вызывать методы непосредственно на узле DOM дерева.

Пример:

Это позволит начать поиск непосредственно из узла и вернуть все дочерние элементы с именем класса ‘child-class’

Итак, какой из них использовать?

Хорошо, у нас есть , и , так какой из них использовать?

Хоть метод и является более современным подходом и ближе к jQuery методу , так как он позволяет использовать в широком диапазоне CSS3 селекторы, есть одно главное различие, которое может вернуться и укусить вас в зад, если вы не знаете этого.

Метод как и jQuery метод, будет возвращать статический , тогда как и будут возвращать живой .

Хорошо, так в чем отличие?

Подумайте о статическом как снимок DOM дерева, когда метод был вызван. Все что вы делаете с DOM после вызова метода не будет отображено в при возврате. В то время как живой вернувший и будет .

Почему это так важно?

Возьмем следующий список элементов:

Давайте получим элементы с помощью метода

Теперь посчитаем эти элементы:

Добавим новый элемент в список:

Теперь давайте снова считать элементы:

Ой, что случилось? Теперь у нас есть 5 элементов в списке, но второй счетчик все еще показывает 4 элемента!

В этом и заключается суть статического , существенное отличие которое вам нужно знать при использовании перед и . Так как оба последние методы возвращают живой , пересчет при второй попытки должно было вернуть 5. На самом деле, не важно какое количество элементов вы добавили или удалили, последние методы всегда будут отображать изменения.

Конечно, это относиться только если DOM дерево меняется после того как вызывается метод, если вы уверены, что никаких изменений в будущем не произойдет, вы в безопасности что бы использовать метод .

Рабочий пример приведенный выше можно найти по этой ссылке: codepen.io/Mobius1/pen/jMjjZd.

Дополнительно к прочтению: getElementById, getElementsByTagName, getElementsByClassName, querySelector, querySelectorAll

Дополнительные селекторы

Получить первый элемент

jQuery

Нативный JS

Помните, что вы можете заменить с DOM узлом, чтобы сделать поиск более эффективным.

Также отметим, что возвращает первый подходящий узла, в то время как вернет .

Получить дочерние узлы элементов

jQuery

Нативный JS

Не используйте метод если не знаете что делаете, или вы должны поддерживать IE <9, так как он может вернуть не являющиеся узлы элемента как текстовые узлы.

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

jQuery

Нативный JS

Метод имеет аналогичные подводные камни как .

Помните, что метод jQuery вроде , и оба поддерживают сложные CSS3 селекторы, поэтому так же могут быть использованы ниже:

В случае с jQuery, есть множество способов получения желаемого узла в приведенном выше примере, таким образом просто выберите тот, который соответствует вашим потребностям, но следует отметить что (в зависимости от используемого браузера) старые и методы могут быть гораздо быстрее, чем новые родные и jQuery методы: запустить тест

Получить последний дочерний элемент

jQuery

Нативный JS

Как и c и , следует использовать только если вы собираетесь поддерживать IE <9.

Дополнительно к прочтению: firstChild, lastChild, childNodes, nodeType, children, firstElementChild, lastElementChild

Получить родителя элемента

jQuery

Нативный JS

Получить следующий элемент

jQuery

Нативный JS

Нативные методы будут возвращать , если является последним потомком его родителя.

Получить предыдущий элемент

jQuery

Нативный JS

Нативные методы будут возвращать , если является первым потомком его родителя.

и методы должны рассматриваться так же, как и , и , для их возврата узлов за исключением HTMLElements.

Если вам нужно использовать любой из этих методов для поддержки старых браузеров, то вы можете проверить для безопасности. HTMLElement nodeType равен 1, если другое значение отличное от 1, то у вас не HTMLElement.

Нет нативной альтернативы?

Обход DOM дерева может быть непростой задачей (особенно для новичков) и к счастью jQuery имеет много полезных методов что бы помочь. Однако не все jQuery методы имеют родной эквивалент.

Получить ближайший элемент вверх по DOM дереву (предка) соответствующий селектору

jQuery

Нативный JS

Несмотря на наличие родной версии jQuery метода , она экспериментальная, и поэтому не должна использоваться на продакшене.

Дополнительно к прочтению: Element.closest()

Давайте создадим наш собственный вместо этого.

Функция выше не включает проверки более сложных атрибутов таких как для сокращения, а также не включает на проверку ID, как правило можно было вызвать что бы найти его.

Вот и все на сегодня. В следующем посту мы будем рассматривать нативные методы jQuery , , , , и методы «полифилов» для старых браузеров.

Часть 2: Работа с атрибутами и свойствами

Часть 3: Обработчики событий

Часть 4: Создание, вставка, перемещение и удаление элементов

Метод удаляет из выборки элементы, удовлетворяющие заданным условиям.

Как использовать селекторы jQuery для выделения элементов страницы

Элементы, которые необходимо исключить, можно указать тремя способами.

Варианты использования

Исключает из выборки элементы, которые удовлетворяют указанному селектору.

Элементы для удаления определяются переданной функцией. Данная функция выполняется для каждого элемента выборки отдельно. Она должна возвращать значение , если элемент удовлетворяет условию фильтрации и должен быть исключён из конечной выборки.
При запуске функции первым аргументом передаётся индекс элемента в выборке. Ссылка на сам элемент хранится в переменной .

Исключает из выборки указанный DOM-элемент (элементы).

Примеры

<html> <head> <title>Работа с выборкой jQuery</title> <script type=»text/javascript» src=»https://steptosleep.ru/wp-content/uploads/2018/06/15007.jpg»></script> </head> <body> <p>Параграф 1</p> <p></p> <p>Параграф 3</p> <p></p> </body> </html> <script> $(‘p’) /* выбор всех параграфов */ .not(function() { return (this.textContent == »); }) /* выбор непустых параграфов */ .css(‘border’, ‘1px solid red’); /* добавление рамки */ </script>

Я пытаюсь реализовать базовую бесконечную карусель jQuery.

Селектор :first

Как для учебного процесса, так и для чего-либо еще (как правило, я не поклонник повторного изобретательства колес, но… мне нужно как-то учиться, возможно, начинать с основ).

Мне удалось получить список, чтобы оживить левый достаточно долго, но я застрял, когда дело доходило до выбора первого элемента списка. Я пытался использовать:

(xhtml ниже),

В каждом случае a (имя ) возвращает все элементы списка. Я делаю что-то откровенно и, очевидно, неправильно?

В конечном итоге планируется клонировать первый , добавить его к родительскому , удалить из списка и разрешить прокручивать список бесконечно. Это всего лишь список сервисов, а не ссылок, поэтому я не планирую, чтобы иметь возможность прокрутки или слева/справа.

Текущий xhtml:

(отредактировано для добавления всего текущего кода /html )

---

Обновлено в ответ на ответ Ника Крейвера:

… Я считаю, что вы хотите: … Что вы, вероятно, хотите, есть что-то вроде

Использование генерирует ошибку:

Uncaught TypeError: Object # не имеет метода ‘remove’

и, по-видимому, нет никакой разницы в поведении при использовании