Как найти элемент с помощью селектора данных в массиве объектов HTML DOM, используя JavaScript? - PullRequest
Новая
       18

Как найти элемент с помощью селектора данных в массиве объектов HTML DOM, используя JavaScript?

1 голос
/ 05 апреля 2019

У меня есть массив объектов HTML DOM: 

// Console output

(3) […]
0: <div data-selector="5">​
1: <div data-selector="9">​
2: <div data-selector="2">​
3: <div data-selector="6">​
4: <div data-selector="13">​
length: 5
<prototype>: Array []

Как найти (и вернуть) объект HTML, имеющий data-selector, равный 9 (то есть <div data-selector="9">​), используя JavaScript

Ответы [ 5 ]

2 голосов
/ 05 апреля 2019

Это решит вашу проблему. 

array.find(item => item.dataset.selector === '9');

Пояснение:

Javascript позволяет использовать dataset для доступа к атрибутам данных в html. То есть они имеют такой шаблон как data-*

Итак, если у вас есть HTML-файл, который выглядит следующим образом: 

<html>
  <div id="root">
    <div data-selector="5"></div>
    <div data-selector="9"></div>
    <div data-selector="2"></div>
    <div data-selector="6"></div>
    <div data-selector="13"></div>
  </div>
</html>

Вы можете получить div с идентификатором root в вашем файле javascript: 

const root = document.querySelector('#root');

// get array of div elements inside root
const tagsArray = [...root.children];

// finally, retrieve the specific element you need
const selectedItem = tagsArray.find(elem => elem.dataset.selector === '9');

// A simple check
console.log(selectedItem); // => <div data-selector="9"></div>
2 голосов
/ 05 апреля 2019

Вы можете использовать функцию querySelectorAll и указать атрибут, например: data-selector и назначить значение, равное 9.

Примечание: функция querySelectorAll возвращает массив элементов. 

const x = document.querySelectorAll("[data-selector='9']");
console.log(x[0].innerHTML);
<p data-selector="9">Test</p>
0 голосов
/ 05 апреля 2019

Использование Array.find : 

// Array of HTML DOM objects:
var myArray = ['<div data-selector="5">', '...', '<div data-selector="9">'];

var found = myArray.find(function(element) {
  return element.getAttribute('data-selector') === '9';
});

Основано на getAttribute() @vaibhav kumar

0 голосов
/ 05 апреля 2019

Вы можете сделать это, используя getAttribute() метод 

var myArray // Let this be your array
var len = myArray.length
// Implement this logic
for(i=0;i<len;i++) {
    if(myArray[i].getAttribute('data-selector') == '9') {
        // Return myArray[i] or do what ever you want to do
    }
}
0 голосов
/ 05 апреля 2019

Вы можете сделать это следующим образом (где array - ваш массив элементов HTML):

array.forEach(element => {
  if(element.getAttribute("data-selector") == "9") doSomething(element);
});

Если атрибут data-selector массива равен "9", функция doSomething() будет выполнена и передана элементу.

...