Actualmente estoy haciendo un desafío de codificación en el que tengo que escribir una función jQuery para obtener el valor del parámetro de datos de cada div a continuación y crear un objeto que contenga cada letra, así como la posición de esa letra del alfabeto.
<div class="foo" data-widget="bar">This</div> <div class="foo" data-widget="baz">That</div>La salida debe ser:
This: {"b":"2", "a":"1", "r":"18"} That: {"b":"2", "a":"1", "z":"26"}Hasta ahora esto es lo que tengo:
var allAttributes = $('.foo').map(function() { return $(this).attr('data-widget'); }).get(); console.log(allAttributes); //this function finds the numerical position of the letters in a string var alphabet = "abcdefghijklmnopqrstuvwxyz".split(''); var alphabetPosition = text => text.split('').map(x => alphabet.indexOf(x) + 1);Considera lo siguiente.
$(function() { var myText = {}; function charPos(c) { var alphabet = "abcdefghijklmnopqrstuvwxyz".split(''); return alphabet.indexOf(c) + 1; } function wordDetails(w) { var r = {}; $.each(w.split(""), function(i, c) { r[c] = charPos(c.toString()); }); return r; } $(".foo").each(function(i, el) { myText[$(el).text().trim()] = wordDetails($(el).data("widget")); }); console.log(myText); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="foo" data-widget="bar">This</div> <div class="foo" data-widget="baz">That</div>Resultado:
{ "This": { "b": 2, "a": 1, "r": 18 }, "That": { "b": 2, "a": 1, "z": 26 } }Si quieres minimizarlo:
$(function() { var myText = {}; $(".foo").each(function(i, el) { var obj = {}; $.each($(el).data("widget").split(""), function() { obj[this] = "abcdefghijklmnopqrstuvwxyz".split('').indexOf(this.toString()) + 1; }); myText[$(el).text().trim()] = obj; }); console.log(myText); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="foo" data-widget="bar">This</div> <div class="foo" data-widget="baz">That</div>Para construir el objeto para cada div , puede obtener el valor del atributo data-widget del elemento, dividirlo en una matriz de caracteres, mapear cada uno y construir una matriz que contenga la letra y su índice en alphabet , luego use Object.fromEntries para convertir en un objeto.
var alphabet = "abcdefghijklmnopqrstuvwxyz".split(''); const obj = {} $('.foo').each(function(){ obj[this.textContent] = Object.fromEntries(this.dataset.widget.split('').map(e => [e, alphabet.indexOf(e) + 1])) }) console.log(obj) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="foo" data-widget="bar">This</div> <div class="foo" data-widget="baz">That</div>Acepto su desafío, sin embargo, después de completarlo, me di cuenta de que dijo JQuery y esta solución es solo Javascript.
Mira mi solución aquí: CodePen
let elements = document.querySelectorAll(".foo"); let alph = 'abcdefghijklmnopqrstuvwxyz'.split(''); let result = {}; Array.from(elements).map(e => { let key = e.innerText; let value = {}; let data = e.dataset.widget.split(''); data.map( c => value[c] = alph.indexOf(c) + 1 ); result[key] = value; }) console.log(result);