Порядковый номер элемента jquery: Как в jQuery определить по элементу его номер в выборке?

it-for-free/jquery-useful-tools — Packagist

nested form filed groups adder

Maintainers

Details

github.com/it-for-free/jquery-useful-tools

Homepage

Source

Issues

Installs: 4

Dependents: 0

Suggesters: 0

Security: 0

Stars: 1

Watchers: 2

Forks: 0

Open Issues: 0

Language:JavaScript

Add Maintainer

Username

Remove Maintainer

Username it-for-free

v0. 0.2 2019-01-22 15:33 UTC

dev-master
v0.0.2
v0.0.1

This package is auto-updated.

Last update: 2023-06-07 12:54:01 UTC

Набор JQuery-плагинов в том числе для работы со сложными формами — дублирования групп полей для вложенных сущностей (например в случае, когда сущости относятся как «один ко многим»)

Использование (Usage)

Некоторые плагины зависят только от jquery, другие ещё и от jquery-ui, в общем случае можно сразу подключать и то и то и сам JUTs в таком порядке:

<script src="jquery. js"></script> 
<script src="jquery-ui.js"></script> 
<script src="dist/juts-min.js"></script>

Основные плагины JUTs

Далее описаны наиболее сложные (крупные) плагины, которые в своей работе могут использовать сразу несколько более простых плагинов JUTs. Кратно об основных:

$.fromFiledsGroupAdderFromHiddenTemplate() копирует в родительский контейнер (на который и вешается событие) из скрытого шаблона
$.fn.parentInParentContainerDublicator() копирует родитеский элемент для данной кнопки (ссылки), в родительский элемент ещё более высокого уровня.

Прочие плагины JUTs

Плагины getAttrFragment и getNameFragment Позволяют извлекать фрагмент значения атрибута вида:

people[123][groups][34][2]

по номеру (парсят квадратные скобки). Полезны напр. для работы с атрибутом name сложных форм.

isInputsEmpty() — порверит пусты ли все поля-потомки данного элемента (можно проверять находится ли фрома в состоянии по-умолчанию)
getInputType() — выяснит тип тега/инпута

Сброка и другая работа с

npm

Сборка:

npm run-script build

Отладочная сборка

npm run-script watch

@TODO

Возможные улучшения (идеи)

parentInParentContainerDublicator мог бы не заменять специальную строку в прототипе с прследующей заменой значения атрибута значением из прототипа, а вообще не использовать прототип (шаблон значения атрибута в дата-атрибуте), просто указывая какой именно по порядку сегомент имени надо заменить на порядковый номер.
(по аналогии с уже внедренной идеей, замены оставшихся спец, строк в шаблоне значения атрибута на аналогические реальные значения сегментам, но там каждый сегмент проверяется специально на то не является ли он подтрокой, что сложнее в том числе для использования).
Может можно отказаться от глобальных массивов регистраций событий и просто использовать проверку не привязано ли уже событие (так или иначе)
Из isInputsEmpty можно (и нужно)) выделить отдельный плагин для проверки на путстоту конткретного инпута

eq Получить элемент DOM по определенному индексу массив элементов.

.eq()выдает найденный новый элемент(ы)DOM.

Cypress может проверять текст на элементе с помощью метода jQuery text().Этот метод поможет нам получить текстовое содержимое выбранного элемента.Мы также можем наложить утверждения на текстовое содержимое элемента.cy.

Чтобы найти элементы по атрибуту данных,сделайте запрос с помощью селектора атрибутов. cy.get()выдает объект jQuery,вы можете получить его атрибут,вызвав метод.attr().

Получить элемент DOM в определенном индексе в массиве элементов.

Поведение при запросе этой команды точно соответствует тому, как .eq() работает в jQuery.

Syntax

.eq(index)
.eq(indexFromEnd)
.eq(index, options)
.eq(indexFromEnd, options)

Usage

Correct Usage

cy.get('tbody>tr').eq(0) // Yield first 'tr' in 'tbody'
cy.get('ul>li').eq(4) // Yield fifth 'li' in 'ul'

Incorrect Usage

cy.eq(0) // Errors, cannot be chained off 'cy'
cy.getCookies().eq(4) // Errors, 'getCookies' does not yield DOM element

Arguments

index(Number)

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

indexFromEnd(Number)

Отрицательное число,указывающее на позицию индекса с конца,чтобы найти элемент внутри массива элементов.

options(Object)

Передайте объект параметров, чтобы изменить поведение по умолчанию .eq() .

Option	Default	Description
`log`	`true`	Отображает команду в журнале команд
`timeout`	`defaultCommandTimeout`	Время ждать `.eq()` до истечения времени ожидания

Yields

.eq() новые найденные им элементы DOM.

Examples

Index

Найти 2-й элемент внутри элементов


 <ul>
  <li>tabby</li>
  <li>siamese</li>
  <li>persian</li>
  <li>sphynx</li>
  <li>burmese</li>
</ul>

cy.get('li').eq(1).should('contain', 'siamese') // true

Сделайте утверждение в 3-ей строке таблицы.

<table>
  <tr>
    <th>Breed</th>
    <th>Origin</th>
  </tr>
  <tr>
    <td>Siamese</td>
    <td>Thailand</td>
  </tr>
  <tr>
    <td>Sphynx</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Persian</td>
    <td>Iran</td>
  </tr>
</table>

cy. get('tr').eq(2).should('contain', 'Canada') //true

Индекс от конца

Найдите 2-й из последнего элемента внутри элементов.

<ul>
  <li>tabby</li>
  <li>siamese</li>
  <li>persian</li>
  <li>sphynx</li>
  <li>burmese</li>
</ul>

cy.get('li').eq(-2).should('contain', 'sphynx') // true

Rules

Requirements

.eq() требует объединения в цепочку команды, которая выдает элемент (ы) DOM.

Assertions

.eq() будет автоматически повторять попытку, пока элемент (ы) не будет существовать в DOM.
.eq() будет автоматически повторять попытку, пока все связанные утверждения не пройдут.

Timeouts

.eq() может истекать по тайм-ауту , ожидая существования элемента (ов) в DOM .
.eq() может задержать ожидание подтверждений, которые вы добавили для прохождения.

Command Log

Найдите 4-го <li> в навигации

cy.get('.left-nav.nav').find('>li').eq(3)

Команды,приведенные выше,будут отображаться в журнале команд как:

При нажатии на команду eq в журнале команд консоль выводит следующее: