admin / 30.07.2018

[Javascript] Лучший способ найти «следующий» элемент ввода формы в jQuery? | CODE Q&A [русский]

Материал из JQuery

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

<< Работа с набором элементов

.next()

Осуществляет поиск элементов, лежащих непосредственно после заданных элементов (по одному для каждого из заданных). Метод имеет один вариант использования:

.next([selector]):jQuery1.0

Возвращает элементы, которые находятся непосредственно после каждого из выбранных элементов. При необходимости, можно задать селекторselector для фильтрации результата.

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

$(«div»).next() вернет элементы, которые находятся непосредственно после div-элементов на странице.
$(«div»).next(«.bigBlock») вернет элементы класса bigBlock, которые находятся непосредственно после div-элементов.

В действии

Выясним, что же идет после обеда(какой элемент идет после элемента с классом lunch):

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src=»https://steptosleep.ru/wp-content/uploads/2018/06/35092.jpg»~gt~~lt~/script~gt~ ~lt~style~gt~ div{ width: 60px; height: 60px; float: left; padding: 15px; margin: 5px; background-color: #EEEEEE; font-size: 14pt; } ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~div class=»breakfast»~gt~ Завтрак ~lt~/div~gt~ ~lt~div class=»lunch»~gt~ Обед ~lt~/div~gt~ ~lt~div class=»supper»~gt~ Ужин ~lt~/div~gt~ ~lt~div class=»nightEat»~gt~ Ночной перекус~lt~/div~gt~ ~lt~script~gt~ $(«.lunch»).next().css(«border»,»3px solid red»); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

Ссылки

[Javascript] Лучший способ найти «следующий» элемент ввода формы в jQuery?

Описание: Осуществляет поиск элементов, лежащих непосредственно после заданных элементов (по одному для каждого из заданных).

Given a jQuery object that represents a set of DOM elements, the method allows us to search through the immediately following sibling of these elements in the DOM tree and construct a new jQuery object from the matching elements.

The method optionally accepts a selector expression of the same type that we can pass to the function. If the immediately following sibling matches the selector, it remains in the newly constructed jQuery object; otherwise, it is excluded.

Consider a page with a simple list on it:

1

2

3

4

5

6

7

If we begin at the third item, we can find the element which comes just after it:

1

The result of this call is a red background behind item 4. Since we do not supply a selector expression, this following element is unequivocally included as part of the object. If we had supplied one, the element would be tested for a match before it was included.

Описание: Осуществляет поиск элементов, являющихся соседними для выбранных элементов (под соседними понимаются элементы, которые имеют общего родителя).

Поиск элементов лежащих после выбранных

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

Given a jQuery object that represents a set of DOM elements, the method allows us to search through the siblings of these elements in the DOM tree and construct a new jQuery object from the matching elements.

The method optionally accepts a selector expression of the same type that we can pass to the function. If the selector is supplied, the elements will be filtered by testing whether they match it.

Consider a page with a simple list on it:

1

2

3

4

5

6

7

If we begin at the third item, we can find its siblings:

1

The result of this call is a red background behind items 1, 2, 4, and 5. Since we do not supply a selector expression, all of the siblings are part of the object. If we had supplied one, only the matching items among these four would be included.

The original element is not included among the siblings, which is important to remember when we wish to find all elements at a particular level of the DOM tree. However, if the original collection contains more than one element, they might be mutual siblings and will both be found. If you need an exclusive list of siblings, use .

Вы здесь: Главная >> Jquery-учебник >> Получаем в jQuery доступ к элементу по индексу

Как получить в jQuery доступ к элементу по индексу

Итак, мы уже разобрались с тем, как получать коллекцию элементов с помощью функции $ () и механизма селекторов.

Большинство же методов библиотеки jQuery позволяет изменить какое-либо свойство сразу всех элементов коллекции. Например, выведем во всех тегах <р> текст «Добрый день!»

$ («р») .text(«Добрый день!») ;

Это, конечно, удобно. Но иногда необходимо получить доступ к какому-либо отдельному элементу коллекции. Прежде чем обратиться к конкретному элементу, следует с помощью свойства length узнать количество элементов в коллекции,

alert($(«р»).length);

Кроме того, можно воспользоваться методом size ().

alert($(«р») .size ());

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

Получить доступ к элементу можно, указав его индекс в квадратных скобках. Нумерация начинается с нуля. В качестве примера выведем текст «Добрый день!» только во втором теге р.

var elems = $ («р») ;
if  (elems.size()  >= 2)   {
elems[1].innerHTML = «Добрый день!»;
}
else {
alert(«Элемента для вывода нет!»);
}

Обратите внимание на тот факт, что доступ по индексу возвращает ссылку на DOM-элемент. Поэтому изменить содержимое можно с помощью свойства innerHTML объекта document. Применить метод jQuery text () можно только после нахождения элемента.

$(elems[1]).text(«Добрый день!»);

Вместо квадратных скобок можно использовать метод get (). Метод имеет следующий формат.

get ( [<Индекс элемента>] )

Если индекс элемента не указан, то возвращается массив DOM-элементов,

var elems = $(«р»).get();
alert(«Количество DOM-элементов » + elems.length);

Указание параметра позволяет получить доступ к конкретному элементу. Нумерация элементов начинается с 0. В качестве примера во всех тегах р выведем индекс текущего абзаца.

var elems = $(«р»);
for  (var i=0,  count=elems.length;  i<count;  i++)   { elems.get(i).innerHTML = i;
}

Все рассмотренные способы позволяли получить доступ к конкретному DOM-элементу. Если необходимо получить доступ к элементу коллекции jQuery, то следует использовать метод eq (). Нумерация элементов начинается с 0. Переделаем наш предыдущий пример и используем метод jQuery html () вместо свойства innerHTML объекта document,

var elems = $(«р»);
for  (var i=0,  count=elems.length;  i<count;  i++)   { elems.eq(i).html(i);
}

Метод slice () позволяет получить срез коллекции. Возвращает новую коллекцию элементов. Имеет следующий формат.

slice (<Начальная позиция>[,  <Конечная позиция>])

Следует учитывать, что нумерация позиций начинается с 0, а конечная позиция не попадает в диапазон возвращаемых значений. Выделим первую ссылку в коллекции.

$(«а») .slice (0,1) .css(«color», «red»);

А теперь выделим только вторую и третью ссылки.

$(«а»).slice(1,3).css(«color», «red»);

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

$(«а») .slice (2) .css(«color», «red») ;

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

$(«а») .slice (-2) .css(«color», «red»);

Пронумеруем все ссылки в документе с помощью метода slice ().

var elem = $ («а») ;
for  (var i=0,  count=elem.size();  i<count;  i++)   { elem.slice(i,i+1).html(«Ссылка » + i);
}

С помощью метода index () можно получить индекс элемента на странице. Если элемент не найден, то возвращается значение -1. Нумерация элементов начинается с нуля. Метод имеет следующий формат,

index (<DOM-элемент>)

При щелчке на абзаце выведем его индекс.

$(«р»).click(function()   {
alert(«Индекс:  » + $(«р»).index(this));
});
<р>Абзац 1</р> <р>Абзац 2</р> <р>Абзац 3</р> <р>Абзац 4</р>

 

Метод each()

Метод each () позволяет перебрать все элементы коллекции без использования циклов. Имеет следующий синтаксис,

each(Функция обратного вызова)

В параметре Функция обратного вызова указывается ссылка на функцию следующего формата.

function <Название функции> ( [<Индекс> [,  <Элемент DOM>]])   { …}

Все параметры являются необязательными. Если в параметре Индекс указать переменную, то на каждой итерации в нее будет передаваться текущий индекс элемента в коллекции. Нумерация начинается с 0. Выведем индекс элемента во всех тегах div.

$(«div»).each(function(i) {
this.innerHTML = «DIV с индексом » + i;
});

Текущий элемент доступен внутри функции через указатель this. Обратите внимание, указатель this ссылается на текущий элемент объектной модели документа, а не на элемент коллекции jQuery.

jQuery селектор следующих элементов

По этой причине применять методы jQuery для этого элемента нельзя. В последнем примере для вывода текста внутри тегов div мы использовали свойство innerHTML объекта document, а не метод из библиотеки jQuery. Если необходимо использовать методы из библиотеки jQuery, то предварительно следует найти элемент с помощью функции $ (). В качестве примера заменим свойство innerHTML на jQuery-метод html () .

$(«div»).each(function(i) {
$(this).html(«DIV с индексом » + i);
});

Если в параметре Элемент DOM указать переменную, то на каждой итерации в нее будет передаваться ссылка на текущий элемент DOM. Эту переменную можно использовать вместо указателя this.

$(«div»).each(function(i, d) {
$(d).html(«DIV с индексом » + i);
});

Если внутри функции вернуть значение false, то выполнение метода each () будет остановлено. При индексе, равном двум, прервем выполнение метода.

$(«div»).each(function(i) {
$(this).html(«DIV с индексом » + i);
if (i == 2) { return false;
}
});

Во всех этих примерах мы использовали анонимную функцию. Если необходимо вызвать обычную функцию, то ее имя указывается в качестве параметра метода each () без скобок.

function myFunc(i,  d)   {
$(d) .html(«DIV с индексом » + i) ; if  (i == 2)   { return false;
}
}
$(document).ready(function()   { $(«div»).each(myFunc);
});

В качестве примера использования метода each () получим URL-адреса всех ссылок в документе (листинг 3.1).

Листинг 3.1.
Получение URL-адресов всех ссылок

<html>
<head>
<title>Получение URL-адресов всех ссылок</title>
<meta http-equiv=»Content-Type» content=»text/html;
charset=utf-8″>
<script src=»https://steptosleep.ru/wp-content/uploads/2018/06/53576.jpg» type=»text/javascript»></script>
<script type=»text/javascript»>
$(document).ready(function() {
   $(«a»).each(function() {
      $(«#div1»).append($(this).attr(«href») + «
«);
   });
});
</script>
</head>
<body>
<a href=»link1.html»>Ссылка 1</a><br>
<a href=»link2.html»>Ссылка 2</a><br>
<a href=»link3.html»>Ссылка 3</a><br>
Все URL-адреса:<br>
<div id=»div1″></div>
</body>
</html>

После загрузки структуры документа находим коллекцию всех тегов а ($ («а»)). Далее с помощью метода each () перебираем все элементы. В качестве параметра указываем анонимную функцию. На каждой итерации внутри анонимной функции доступен указатель (this) на текущий элемент коллекции. Находим текущий элемент ($ (this)) и с помощью метода attr () получаем значение параметра href (attr («href»)). Для вывода результата находим элемент с идентификатором divl ($ («#divl»)) и с помощью метода append () добавляем результат в конец к имеющемуся значению элемента.

Jquery найти следующий элемент с классом

Отбор элементов по названию атрибута

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

$("a [title]")

Отбор по значению атрибута

Выбор всех элементов input, у которых атрибут type имеет значение submit.

$("input [type=submit]")

Отбор по первым символам значения атрибута

Выбираем все изображения, где первые символы значения атрибута title равны big. Специальный символ (^) стоящий перед знаком равно означает, что последовательность символов нужно искать вначале значения атрибута.

$("a [title^=big]")

Отбор по последним символам значения атрибута

Отбор всех ссылок ссылающихся на файл с расширением .rar. Специальный символ ($) стоящий перед знаком равно означает, что указанную последовательность символов нужно искать в конце значения атрибута.

$("a [href$=.rar]")

Отбор по последовательности символов в любом месте значения атрибута

В данном случае будут отобраны все ссылки в которые в значениях атрибута href содержат последовательность символов “jquery.com”, в любом месте, иначе говоря, будут отобраны все ссылки, ссылающиеся на сайт “jquery.com”.

$("a [href*=jquery.com]")

FILED UNDER : IT

Submit a Comment

Must be required * marked fields.

:*
:*