Data index number html

Html how to find index number on javascript

There are all kinds of sorts: bubble sort, shell sort, block sort, comb sort, cocktail sort, gnome sort — I’m not making these up! Since we’re ultimately returning an index, sticking with arrays is going to work for us.

How to find the index where a number belongs in an array in JavaScript

Sorting is a very important concept when writing algorithms. There are all kinds of sorts: bubble sort, shell sort, block sort, comb sort, cocktail sort, gnome sort — I’m not making these up!

This challenge gives us a glimpse into the wonderful world of sorts. We have to sort an array of numbers from least to greatest and find out where a given number would belong in that array.

Algorithm instructions

Return the lowest index at which a value (second argument) should be inserted into an array (first argument) once it has been sorted. The returned value should be a number.

For example, getIndexToIns([1,2,3,4], 1.5) should return 1 because it is greater than 1 (index 0), but less than 2 (index 1).

Likewise, getIndexToIns([20,3,5], 19) should return 2 because once the array has been sorted it will look like [3,5,20] and 19 is less than 20 (index 2) and greater than 5 (index 1).

function getIndexToIns(arr, num) < return num; >getIndexToIns([40, 60], 50);

Provided Test Cases

• getIndexToIns([10, 20, 30, 40, 50], 35) should return 3 .
• getIndexToIns([10, 20, 30, 40, 50], 35) should return a number.
• getIndexToIns([10, 20, 30, 40, 50], 30) should return 2 .
• getIndexToIns([10, 20, 30, 40, 50], 30) should return a number.
• getIndexToIns([40, 60], 50) should return 1 .
• getIndexToIns([40, 60], 50) should return a number.
• getIndexToIns([3, 10, 5], 3) should return 0 .
• getIndexToIns([3, 10, 5], 3) should return a number.
• getIndexToIns([5, 3, 20, 3], 5) should return 2 .
• getIndexToIns([5, 3, 20, 3], 5) should return a number.
• getIndexToIns([2, 20, 10], 19) should return 2 .
• getIndexToIns([2, 20, 10], 19) should return a number.
• getIndexToIns([2, 5, 10], 15) should return 3 .
• getIndexToIns([2, 5, 10], 15) should return a number.
• getIndexToIns([], 1) should return 0 .
• getIndexToIns([], 1) should return a number.

Solution #1: .sort( ), .indexOf( )

PEDAC

Understanding the Problem : We have two inputs, an array, and a number. Our goal is to return the index of our input number after it is sorted into the input array.

Examples/Test Cases : The good people at freeCodeCamp don’t tell us in which way the input array should be sorted, but the provided test cases make it clear that the input array should be sorted from least to greatest.

Notice that there is an edge case on the last two provided test cases where the input array is an empty array.

Data Structure : Since we’re ultimately returning an index, sticking with arrays is going to work for us.

We’re going to utilize a nifty method named .indexOf() :

.indexOf() returns the first index at which an element is present in an array, or a -1 if the element is not present at all. For example:

let food = ['pizza', 'ice cream', 'chips', 'hot dog', 'cake']

food.indexOf('chips')// returns 2food.indexOf('spaghetti')// returns -1

We’re also going to be using .concat() here instead of .push() . Why? Because when you add an element to an array using .push() , it returns the length of the new array. When you add an element to an array using .concat() , it returns the new array itself. For example:

array.push(98)// returns 6array.concat(98)// returns [4, 10, 20, 37, 45, 98]

1. Insert num into arr .
2. Sort arr from least to greatest.
3. Return the index of num .

Code : See below!

function getIndexToIns(arr, num) < // Insert num into arr, creating a new array. let newArray = arr.concat(num) // [40, 60].concat(50) // [40, 60, 50] // Sort the new array from least to greatest. newArray.sort((a, b) =>a - b) // [40, 60, 50].sort((a, b) => a - b) // [40, 50, 60] // Return the index of num which is now // in the correct place in the new array. return newArray.indexOf(num); // return [40, 50, 60].indexOf(50) // 1 > getIndexToIns([40, 60], 50);

Without local variables and comments:

function getIndexToIns(arr, num) < return arr.concat(num).sort((a, b) =>a - b).indexOf(num); > getIndexToIns([40, 60], 50);

Solution #2: .sort( ), .findIndex( )

PEDAC

Understanding the Problem : We have two inputs, an array, and a number. Our goal is to return the index of our input number after it is sorted into the input array.

Examples/Test Cases : The good people at freeCodeCamp don’t tell us in which way the input array should be sorted, but the provided test cases make it clear that the input array should be sorted from least to greatest.

There are two edge cases to take into account with this solution:

1. If the input array is empty then we need to return 0 because num would be the only element in that array, therefore at index 0 .
2. If num would belong at the very end of arr sorted from least to greatest, then we need to return the length of arr .

Data Structure : Since we’re ultimately returning an index, sticking with arrays is going to work for us.

Let’s checkout .findIndex() to see how it’s going to help solve this challenge:

.findIndex() returns the index of the first element in the array that satisfies the provided testing function. Otherwise, it returns -1, indicating no element passed the test. For example:

let numbers = [3, 17, 94, 15, 20] numbers.findIndex((currentNum) => currentNum % 2 == 0) // returns 2 numbers.findIndex((currentNum) => currentNum > 100) // returns -1

This is useful for us because we can use .findIndex() to compare our input num to every number in our input arr and figure out where it would fit in order from least to greatest.

1. If arr is an empty array, return 0 .
2. If num belongs at the end of the sorted array, return the length of arr .
3. Otherwise, return the index num would be if arr was sorted from least to greatest.

Code : See below!

function getIndexToIns(arr, num) < // Sort arr from least to greatest. let sortedArray = arr.sort((a, b) =>a - b) // [40, 60].sort((a, b) => a - b) // [40, 60] // Compare num to each number in sortedArray // and find the index where num is less than or equal to // a number in sortedArray. let index = sortedArray.findIndex((currentNum) => num 50 falsy // [40, 60].findIndex(60 => 50 truthy // returns 1 because num would fit like so [40, 50, 60] // Return the correct index of num. // If num belongs at the end of sortedArray or if arr is empty // return the length of arr. return index === -1 ? arr.length : index > getIndexToIns([40, 60], 50);

Without local variables and comments:

function getIndexToIns(arr, num) < let index = arr.sort((a, b) =>a - b).findIndex((currentNum) => num getIndexToIns([40, 60], 50);

If you have other solutions and/or suggestions, please share in the comments!

This article is a part of the series freeCodeCamp Algorithm Scripting.

This article references freeCodeCamp Basic Algorithm Scripting: Where do I Belong.

You can follow me on Medium, LinkedIn, and GitHub!

JavaScript Array find() Method, The find() method returns undefined if no elements are found. The find() method does not execute the function for empty elements. The find() method does not

Javascript cant get index number of data-index

This isn’t what you expect.

When you use a fat arrow function () => <> you say that ‘this’ shouldn’t switch into your local context. By using a classic function style, you set this to the expected element and it works.

How to get the index of the element in javascript?, var arr = Array.prototype.slice.call(yourNodeListObject); // Now it’s an Array. arr.indexOf(element); // The index of your element :).

Get index number from parent node using indexOf.call javascript

You just needed to access the prt.childNodes .

var chl = document.querySelector('li#element') var prt = chl.parentNode; const index = Array.prototype.indexOf.call(prt.childNodes, chl) console.log(index)

Get all of the li.products, then find the index by testing the ids.

const products = document.querySelectorAll('li.product'); const i = Array.from(products).findIndex(p => p.id === 'element'); console.log(i);

This is my attempt to get all the product using document.querySelectorAll , it will select all the HTML tag with the class of product . After that change it into an array of ids, then find the index of target id from that array.

// get all the li with class product and turn it into array const all_products = [. document.querySelectorAll('li.product')] // convert array of li to array of id const all_products_id = all_products.map(li => li.id) // find the id from the array of id console.log("The index of product with id of element = " + all_products_id.indexOf("element"))

How to find index of an object by key and value in an javascript array, Missing: html | Must include:

Источник

Атрибуты data-

Атрибуты данных позволяют создавать свои атрибуты для хранения произвольной информации. Данные могут быть получены с помощью скриптов . Имя атрибута должно обязательно начинаться с data-, дальше можно использовать латинские буквы в нижнем регистре, цифры и следующие символы: дефис ( — ), двоеточие ( : ), подчёркивание ( _ ).

Поддержка старых браузеров

Атрибуты данных были введены в HTML5, который поддерживается всеми современными браузерами, но старые браузеры не распознают атрибуты данных. Однако в спецификациях HTML указано, что атрибуты, которые не распознаются браузером, должны игнорироваться, и браузер просто не использует их при рендеринге страницы. Веб-разработчики использовали этот факт для создания нестандартных атрибутов, которые являются атрибутами, не входящими в спецификации HTML. Например, атрибут value в нижеприведенной строке считается нестандартным атрибутом, поскольку спецификация тега не имеет атрибута value и он не является глобальным атрибутом:

Это означает, что, хотя атрибуты данных не поддерживаются в старых браузерах, но они будут работать, и вы можете устанавливать и извлекать их с использованием общих методов JavaScript setAttribute и getAttribute , однако вы не можете использовать новое свойство dataset , которое поддерживается только в современных браузерах.

Использование атрибута data-

HTML5-атрибуты data-* обеспечивают удобный способ хранения данных в HTML-элементах. Сохраненные данные могут быть прочитаны или изменены с помощью JavaScript.

Для доступа к атрибуту можно воспользоваться кодом:

var user = document.getElementById('user'); user.dataset.indexNumber // "1234"

• Структура атрибута данных: data- * , то есть имя атрибута данных появляется после части data- . Используя это имя, можно получить доступ к атрибуту.
• Данные в формате строки (включая json) могут быть сохранены с использованием атрибута data- * .

Источник

HTML Атрибут data-*

Атрибут data-* (от англ. «data» ‒ «данные») является универсальным, так как его можно использовать практически для любых целей. В частности основной задачей данного атрибута является хранение пользовательских данных частной страницы или приложения, для которых больше нет соответствующих атрибутов или элементов.

Данный атрибут условно делится на 2 составляющие:

1. Приставка data- определяющая данный атрибут;
2. Следующее за приставкой data- пользовательское имя атрибута, которое может быть задано любым количеством символов, но не менее одного символа после приставки. Можно использовать латинские буквы в нижнем регистре (даже если всё же имя атрибута прописывается заглавными буквами, они все автоматически переводятся в соответствующие символы нижнего регистра), цифры и следующие символы: дефис (-) , двоеточие (:) , подчёркивание (_) .

Синтаксис

Синтаксис прост — любой атрибут, чье имя начинается с data- , является data-* атрибутом. Допустим у вас имеется статья и вы хотите сохранить дополнительную информацию без её визуального представления. Используйте для этого data-атрибуты:

Значения

В качестве значения может указываться любое значение, соответствующее замыслу пользователя.

Значение по умолчанию

Применяется к тегам

Атрибут data-* относится к глобальным атрибутам, и может быть использован с любым элементом HTML.

Доступ в JavaScript

Все браузеры позволяют вам получить и изменить data- атрибуты в JavaScript с использованием методов getAttribute и setAttribute.
Но стандарты предоставляют более простой способ — у нас есть API для работы с наборами данных HTML5, которое возвращает объект DOMStringMap. Необходимо помнить, что data- атрибуты трансформируются в переменные, к которым в дальнейшем можно обращаться и получать значения, по следующим правилам:

• приставка data- удаляется;
• любой дефис идущий перед буквой удаляется, а буква за ним становится заглавной;
• другие дефисы остаются неизменными;
• любые другие буквы остаются неизменными.

Например, атрибут data-date-of-birth преобразуется в переменную dateOfBirth . Для обращения к атрибутам и получения их значений через скрипты применяется метод dataset. Он же используется и для установки нового значения.

значение = элемент.dataset.атрибут элемент.dataset.атрибут = значение 

Здесь имя атрибута — это переменная, полученная путём изменения атрибута по вышеприведённым правилам ( dateOfBirth , а не data-date-of-birth или date-of-birth ).

Источник