Css jquery первый элемент

How do I get first element rather than using [0] in jQuery?

I’m new to jQuery, apologies if this is a silly question. When I use it find an element using the id, I know theres always one match and in order to access it I would use the index [0]. Is there a better way of doing this? For e.g.

var gridHeader = $("#grid_GridHeader")[0]; 

7 Answers 7

You can use .get(0) as well but. you shouldn’t need to do that with an element found by ID, that should always be unique. I’m hoping this is just an oversight in the example. if this is the case on your actual page, you’ll need to fix it so your IDs are unique, and use a class (or another attribute) instead.

.get() (like [0] ) gets the DOM element, if you want a jQuery object use .eq(0) or .first() instead 🙂

@BrunoLM — If you want a DOM element, document.getElementById(‘id’) , don’t create a jQuery object just to throw it away. that’s tremendously wasteful, from the selector engine to the object wrapper, it’s just overkill for no good reason 🙂

@NickCraver — Thanks for that. I just replaced a bunch of document.getElementById(‘id’) with $(‘#id’)[0] but didn’t like the [0] . Your comment about wastefulness made me think to define $0 = function(id) and now I like $0(‘id’) better. Same number of chars as $(‘#id’) , I just wish it could be $#(‘id’)

@NickCraver you’re (were, 6 years ago) assuming that the jQuery object is thrown away and that it’s only used to get a DOM element.

Источник

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

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

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

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

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

В действии

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

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src="https://code.jquery.com/jquery-latest.js"~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 ~gt~Василий~lt~/span~gt~ ~lt~span ~gt~Жучка~lt~/span~gt~ ~lt~div ~gt~ ~lt~b~gt~Деревня~lt~/b~gt~~lt~br~gt~ ~lt~span ~gt~Рекс~lt~/span~gt~ ~lt~span ~gt~Ибрагим~lt~/span~gt~ ~lt~span ~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

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

~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://code.jquery.com/jquery-latest.js"~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 ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~tt ~gt~‹ul›~lt~/tt~gt~ ~lt~ul~gt~ ~lt~li~gt~~lt~tt ~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 ~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 /~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 /~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 /~gt~ ~lt~/ul~gt~ ~lt~div ~gt~~lt~p ~gt~~lt~/p~gt~ – выбранные с помощью :first p-элементы.~lt~/div~gt~ ~lt~div ~gt~~lt~p ~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~

Ссылки

Источник

Соседи, потомки и поиск элементов в jQuery (prev, next, first, last, parent, find)

В jQuery существуют методы для работы с соседними элементами, потомками а также для поиска элементов внутри родительского. Рассмотрим эти методы.

Обращение к предыдущему и следующему элементу (prev, next)

Для обращения к предыдущему и следующему элементу существуют два метода под названием prev, next. Всё что они делают — указывают на предыдущий или последующий HTML тег. Попробуем применить их на практике. Используем их одновременно так, чтобы поменять HTML содержимое предыдущего и последующего элемента:

Тише, мыши, кот на крыше
 
а котята ещё выше.
 
Кот пошёл за молоком,
 
а котята кувырком.
  

Мышь
 
а котята ещё выше.
 
Кот пошёл за молоком,
 
Кот

Первый и последний вложенный элемент (first, last)

Методы first и last находят первый и последний элемент внутри родительского. Продемонстрируем их работу, модифицировав предыдущий применр.

Тише, мыши, кот на крыше
 
а котята ещё выше.
 
Кот пошёл за молоком,
 
а котята кувырком.
  

Код $(‘div’) вернёт ссылки на все div элементы. Но first и last отфильтруют первый и последний из них, поэтому метод html будет применён только к первому и последнему div:

Мышь
 
а котята ещё выше.
 
Кот пошёл за молоком,
 
Кот

Обращение к родительскому элементу (parent)

В библиотеке jQuery есть удобный метод для обращения к родительскому элементу. Это метод parent. Благодаря ему не обязательно придумывать селектор, чтобы выбрать родительских элемент относительно текущего. Достаточно использовать этот метод. Попробуем продемонстрировать это на примере:

 
Тише, мыши, кот на крыше 
  

В примере сначала выбирается элемент с . Затем с помощью метода «parent» происходит обращение к его родительскому элементу. И только потом происходит вставка HTML кода в конец элемента с помощью метода «append». Результат выполнения кода:

 
Тише, мыши, кот на крыше а котята ещё выше. 

Поиск элемента внутри родителя (find)

Порой надо найти элементы внутри уже найденных. Для этого можно использовать метод find. Продемонстрируем его работу наглядно:

 
Тише, мыши, кот на крыше
 
а котята ещё выше.
 
Кот пошёл за молоком
 
  

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

 
Тише, мыши, кот на крыше
 
а котята ещё выше.
 
Кот пошёл за молоком.
 

Источник

.first()

Описание: Возвращает первый элемент из всех выбранных. Эквивалентно .eq(0).

Добавлен в версии: 1.4 .first()

Given a jQuery object that represents a set of DOM elements, the .first() method constructs a new jQuery object from the first element in that set.

Consider a page with a simple list on it:

ul>
 li>list item 1 li>
 li>list item 2 li>
 li>list item 3 li>
 li>list item 4 li>
 li>list item 5 li>
 ul>

We can apply this method to the set of list items:

$( "li" ).first().css( "background-color", "red" );

The result of this call is a red background for the first item.

• Ajax
  • Глобальные Ajax события
  • Вспомогательные методы
  • Низкоуровневый интерфейс
  • Сокращенные методы
  • Базовые
  • Пользовательские
  • Затухание
  • Скольжение
  • События браузера
  • Загрузка документа
  • Прикрепление обработчиков
  • Объект событие
  • События формы
  • События клавиатуры
  • События мыши
  • Class атрибут
  • Копирование
  • DOM Вставка вокруг
  • DOM Вставка внутрь
  • DOM Вставка вне
  • DOM Удаление
  • DOM Замена
  • Общие аттрибуты
  • Свойства стилей
  • Манипуляция коллекциями
  • Хранилище данных
  • DOM методы элементов
  • Методы установки
  • Экземпляр объекта jQuery
  • Глобальный объект jQuery
  • Атрибут
  • Базовые
  • Базовые фильтры
  • Фильтры потомков
  • Фильтры содержимого
  • Форма
  • Иерархия
  • jQuery расширение
  • Фильтр видимости
  • Фильтрация
  • Обход
  • Обход элементов
  • Версия 1.3
  • Версия 1.7
  • Версия 1.8
  • Версия 1.9
  • Версия 1.10
  • Версия 3.0

  Русская документация по jQuery.
  При использовании любых материалов с сайта ссылка на сайт обязательна.

  Источник

  :first Selector

  Description: Selects the first matched DOM element.

  version added: 1.0 jQuery( «:first» )

  As of jQuery 3.4, the :first pseudo-class is deprecated. Remove it from your selectors and filter the results later using .first() .

  The :first pseudo-class is equivalent to :eq( 0 ) . It could also be written as :lt( 1 ) . While this matches only a single element, :first-child can match more than one: One for each parent.

  Additional Notes:

  • Because :first is a jQuery extension and not part of the CSS specification, queries using :first cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :first to select elements, first select the elements using a pure CSS selector, then use .filter(«:first») .
  • Selected elements are in the order of their appearance in the document.

  Example:

  Finds the first table row.

  html>
  html lang="en">
  head>
   meta charset="utf-8">
   title>first demo title>
   style> 
   td 
   color: blue;
   font-weight: bold;
   >
   style>
   script src="https://code.jquery.com/jquery-3.7.0.js"> script>
   head>
  body>
   
  table>
   tr>td>Row 1 td> tr>
   tr>td>Row 2 td> tr>
   tr>td>Row 3 td> tr>
   table>
   
  script> 
  $( "tr:first" ).css( "font-style", "italic" );
   script>
   
   body>
   html>

  Demo:

  • Ajax
    • Global Ajax Event Handlers
    • Helper Functions
    • Low-Level Interface
    • Shorthand Methods
    • Deprecated 1.3
    • Deprecated 1.7
    • Deprecated 1.8
    • Deprecated 1.9
    • Deprecated 1.10
    • Deprecated 3.0
    • Deprecated 3.2
    • Deprecated 3.3
    • Deprecated 3.4
    • Deprecated 3.5
    • Basics
    • Custom
    • Fading
    • Sliding
    • Browser Events
    • Document Loading
    • Event Handler Attachment
    • Event Object
    • Form Events
    • Keyboard Events
    • Mouse Events
    • Class Attribute
    • Copying
    • DOM Insertion, Around
    • DOM Insertion, Inside
    • DOM Insertion, Outside
    • DOM Removal
    • DOM Replacement
    • General Attributes
    • Style Properties
    • Collection Manipulation
    • Data Storage
    • DOM Element Methods
    • Setup Methods
    • Properties of jQuery Object Instances
    • Properties of the Global jQuery Object
    • Attribute
    • Basic
    • Basic Filter
    • Child Filter
    • Content Filter
    • Form
    • Hierarchy
    • jQuery Extensions
    • Visibility Filter
    • Filtering
    • Miscellaneous Traversing
    • Tree Traversal
    • Version 1.0
    • Version 1.0.4
    • Version 1.1
    • Version 1.1.2
    • Version 1.1.3
    • Version 1.1.4
    • Version 1.2
    • Version 1.2.3
    • Version 1.2.6
    • Version 1.3
    • Version 1.4
    • Version 1.4.1
    • Version 1.4.2
    • Version 1.4.3
    • Version 1.4.4
    • Version 1.5
    • Version 1.5.1
    • Version 1.6
    • Version 1.7
    • Version 1.8
    • Version 1.9
    • Version 1.11 & 2.1
    • Version 1.12 & 2.2
    • Version 3.0
    • Version 3.1
    • Version 3.2
    • Version 3.3
    • Version 3.4
    • Version 3.5
    • Version 3.6
    • Version 3.7

    Books

    Copyright 2023 OpenJS Foundation and jQuery contributors. All rights reserved. See jQuery License for more information. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. OpenJS Foundation Terms of Use, Privacy, and Cookie Policies also apply. Web hosting by Digital Ocean | CDN by StackPath

    Источник