Javascript this each function

5 примеров использования функции jQuery .each()

Функция each jQuery используется для перебора элементов объекта jQuery . Он содержит один или несколько элементов DOM и предоставляет все функции jQuery . Дополнительно jQuery предоставляет вспомогательную функцию с тем же именем, которая может быть вызвана без предварительного выбора или создания элементов DOM . Давайте узнаем об этом более подробно.

Синтаксис функции jQuery .each()

В следующем примере мы выбираем на веб-странице все элементы div и выводим индекс и идентификатор каждого из них. Возможный результат: “ div0:header ”, “ div1:body ”, “ div2:footer ”. В примере используется функция jQuery each() , а не вспомогательная:

// Элементы DOM $('div').each(function (index, value) < console.log('div' + index + ':' + $(this).attr('id')); >);

В следующем примере продемонстрировано использование вспомогательной функции. В данном случае объект, для которого выполняется цикл, задается в качестве первого аргумента. В этом примере я покажу, как перебрать массив через цикл с помощью jQuery each function :

// Массивы var arr = [ 'один', 'два', 'три', 'четыре', 'пять' ]; $.each(arr, function (index, value) < console.log(value); // Выполнение останавливается после "три" return (value !== 'три'); >); // Результат: один два три

В последнем jQuery each примере я хочу представить циклы через свойства объекта:

// Объекты var obj = < one: 1, two: 2, three: 3, four: 4, five: 5 >; $.each(obj, function (index, value) < console.log(value); >); // Результат: 1 2 3 4 5

Все это сводится к формированию надлежащего обратного вызова. Контекст обратного вызова this будет равен второму аргументу, который является текущим значением. Но поскольку контекст всегда будет объектом, то простые значения должны быть « обернуты ». Поэтому строгое равенство между значением и контекстом не может быть задано. Первый аргумент — текущий индекс, который является числом для jQuery each array или строкой ( для объектов ).

Основной пример использования функции jQuery .each ()

Давайте посмотрим, как функция each() применяется в сочетании с объектом jQuery . В первом примере выбираются все элементы a на странице, и выводится их атрибут href :

$('a').each(function (index, value)< console.log($(this).attr('href')); >);

Во втором примере использования jQuery each object выводятся все внешние href на веб-странице ( при условии, что используется протокол HTTP ):

$('a').each(function (index, value) < var link = $(this).attr('href'); if (link.indexOf('http://') === 0) < console.log(link); >>);

Источник

5 примеров использования функции jQuery .each()

Функция each jQuery используется для перебора элементов объекта jQuery . Он содержит один или несколько элементов DOM и предоставляет все функции jQuery . Дополнительно jQuery предоставляет вспомогательную функцию с тем же именем, которая может быть вызвана без предварительного выбора или создания элементов DOM . Давайте узнаем об этом более подробно.

Синтаксис функции jQuery .each()

В следующем примере мы выбираем на веб-странице все элементы div и выводим индекс и идентификатор каждого из них. Возможный результат: “ div0:header ”, “ div1:body ”, “ div2:footer ”. В примере используется функция jQuery each() , а не вспомогательная:

// Элементы DOM $('div').each(function (index, value) < console.log('div' + index + ':' + $(this).attr('id')); >);

В следующем примере продемонстрировано использование вспомогательной функции. В данном случае объект, для которого выполняется цикл, задается в качестве первого аргумента. В этом примере я покажу, как перебрать массив через цикл с помощью jQuery each function :

// Массивы var arr = [ 'один', 'два', 'три', 'четыре', 'пять' ]; $.each(arr, function (index, value) < console.log(value); // Выполнение останавливается после "три" return (value !== 'три'); >); // Результат: один два три

В последнем jQuery each примере я хочу представить циклы через свойства объекта:

// Объекты var obj = < one: 1, two: 2, three: 3, four: 4, five: 5 >; $.each(obj, function (index, value) < console.log(value); >); // Результат: 1 2 3 4 5

Все это сводится к формированию надлежащего обратного вызова. Контекст обратного вызова this будет равен второму аргументу, который является текущим значением. Но поскольку контекст всегда будет объектом, то простые значения должны быть « обернуты ». Поэтому строгое равенство между значением и контекстом не может быть задано. Первый аргумент — текущий индекс, который является числом для jQuery each array или строкой ( для объектов ).

Основной пример использования функции jQuery .each ()

Давайте посмотрим, как функция each() применяется в сочетании с объектом jQuery . В первом примере выбираются все элементы a на странице, и выводится их атрибут href :

$('a').each(function (index, value)< console.log($(this).attr('href')); >);

Во втором примере использования jQuery each object выводятся все внешние href на веб-странице ( при условии, что используется протокол HTTP ):

$('a').each(function (index, value) < var link = $(this).attr('href'); if (link.indexOf('http://') === 0) < console.log(link); >>);

Источник

.each()

Description: Iterate over a jQuery object, executing a function for each matched element.

version added: 1.0 .each( function )

The .each() method is designed to make DOM looping constructs concise and less error-prone. When called it iterates over the DOM elements that are part of the jQuery object. Each time the callback runs, it is passed the current loop iteration, beginning from 0. More importantly, the callback is fired in the context of the current DOM element, so the keyword this refers to the element.

Suppose you have a simple unordered list on the page:

You can select the list items and iterate across them:

$( "li" ).each(function( index ) 
 console.log( index + ": " + $( this ).text() );
>);

// The .each() method is unnecessary here:
$( "li" ).each(function( ) 
 $( this ).addClass( "foo" );
>);
 
// Instead, you should rely on implicit iteration:
$( "li" ).addClass( "bar" );

html>
html lang="en">
head>
 meta charset="utf-8">
 title>each demo title>
 style> 
 div 
 color: red;
 text-align: center;
 cursor: pointer;
 font-weight: bolder;
 width: 300px;
 >
 style>
 script src="https://code.jquery.com/jquery-3.7.0.js"> script>
 head>
body>
 
div>Click here div>
div>to iterate through div>
div>these divs. div>
 
script> 
$( document.body ).on( "click", function( ) 
 $( "div" ).each( function( i ) 
 if ( this.style.color !== "blue" ) 
 this.style.color = "blue";
 > else 
 this.style.color = "";
 >
 > );
> );
 script>
 
 body>
 html>

html>
html lang="en">
head>
 meta charset="utf-8">
 title>each demo title>
 style> 
 ul 
 font-size: 18px;
 margin: 0;
 >
 span 
 color: blue;
 text-decoration: underline;
 cursor: pointer;
 >
 .example 
 font-style: italic;
 >
 style>
 script src="https://code.jquery.com/jquery-3.7.0.js"> script>
 head>
body>
 
To do list: span>(click here to change) span>
ul>
 li>Eat li>
 li>Sleep li>
 li>Be merry li>
 ul>
 
script> 
$( "span" ).on( "click", function( ) 
 $( "li" ).each(function( ) 
 $( this ).toggleClass( "example" );
 >);
>);
 script>
 
 body>
 html>

html>
html lang="en">
head>
 meta charset="utf-8">
 title>each demo title>
 style> 
 div 
 width: 40px;
 height: 40px;
 margin: 5px;
 float: left;
 border: 2px blue solid;
 text-align: center;
 >
 span 
 color: red;
 >
 style>
 script src="https://code.jquery.com/jquery-3.7.0.js"> script>
 head>
body>
 
button>Change colors button>
span> span>
div> div>
div> div>
div> div>
div> div>
div id="stop">Stop here div>
div> div>
div> div>
div> div>
 
script> 
$( "button" ).on( "click", function( ) 
 $( "div" ).each(function( index, element ) 
 // element == this
 $( element ).css( "backgroundColor", "yellow" );
 if ( $( this ).is( "#stop" ) ) 
 $( "span" ).text( "Stopped at div index #" + index );
 return false;
 >
 >);
>);
 script>
 
 body>
 html>