Получение массива из атрибута данных без jQuery

Я хочу работать с массивом, чтобы пройти через использование атрибута данных. В моем HTML-теге у меня есть этот атрибут:

data-toshow='["tblp"]'

Я могу получить доступ и использовать его с JQuery при использовании

$().data('toshow')

Но при использовании dataset.toshow Я не получаю тот же результат. Я на самом деле не получаю массив.

Может кто-то объяснить это мне? И дайте мне ответ, как сделать то же самое без использования jQuery?

Источник

4 ответа

Решение

JQuery-х .data() Метод автоматически пытается преобразовать строку в вашем пользовательском атрибуте данных в тот тип, в котором он выглядит (в данном случае массив). JavaScript просто обрабатывает его как строку, поэтому вам нужно проанализировать строку, чтобы получить тот же вывод массива, который вы получаете с jQuery. Например:

// jQuery approach
let jqtest = $('div').data('toshow');
console.log(jqtest);

// Plain JavaScript approach
let jstest = JSON.parse(document.querySelector('div').dataset.toshow);
console.log(jstest);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-toshow='["tblp"]'></div>

Источник 

//Use dataset to get a string of all data-* props
const stringVal = document.querySelector('#divA').dataset['toshow'];

//Parse the value of "data-toshow" to get your array
const array = JSON.parse(stringVal);
console.log(array);
<div id="divA" data-toshow='["tblp"]'></div>

Источник

Каждый элемент HTMLElement имеет dataset свойство, это свойство может быть нулевым, если нет data атрибута в элементе, но если есть какой-либо атрибут данных, свойство набора данных является массивом, содержащим все значения данных, объявленные в элементе.

Учитывая HTML как <div data-name='Usher' data-max-number='5'> Есть два способа получить этот атрибут данных с помощью JavaScript,

Одним из способов является вызов element.getAttribute('data-name') or element.getAttribute('data-max-number') этого элемента.

Второй способ - через свойство набора данных элемента. который вы бы использовали element.dataset.name получить атрибут имени или element.dataset.maxNumberПРИМЕЧАНИЕ. Как max-number становится maxNumber. Вот так вы получаете доступ к атрибуту набора данных, разделенному дефисом, используя camelCase

Источник

Предполагая, что у вас есть HTML, похожий на:

<div id="theThing" data-toshow='["tblp"]'></div>

или же

<div id="theThing" data-toshow='["tblp","arrItem2","arrItem3"]'></div>

//jQuery
var container_jq = $("#theThing");
var container_jq_dataArr = decodeURIComponent(container_jq.data('toshow')).split(",");

//vanilla
var container_vanilla = document.getElementById("theThing");
var container_vanilla_dataArr = JSON.parse(decodeURIComponent(container_vanilla.dataset.toshow));

console.info({jQuery: container_jq_dataArr,vanilla: container_vanilla_dataArr});

JSFIDDLE в действии

Источник
Другие вопросы по тегам