如何创建一个对象，该对象包含数据属性的每个字母以及该字母在字母表中的位置

Question

我目前正在做一个编码挑战，我必须编写一个jQuery函数来获取下面每个div的data参数的值，并创建一个包含每个字母以及该字母在字母表中的位置的对象。

<div class="foo" data-widget="bar">This</div>
<div class="foo" data-widget="baz">That</div>

输出应该是:

This: {"b":"2", "a":"1", "r":"18"}
That: {"b":"2", "a":"1", "z":"26"}

到目前为止，这是我所拥有的:

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);

Answer 1

为每个div构建对象，您可以获取项目的data-widget属性值，将其拆分为字符数组，通过每个字符进行映射，构建包含alphabet中字母及其索引的数组，然后使用Object.fromEntries转换为对象。

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>

Answer 2

考虑以下内容:

$(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>

结果:

{
"This": {
"b": 2,
"a": 1,
"r": 18
},
"That": {
"b": 2,
"a": 1,
"z": 26
}
}

如果你想最小化它:

$(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>

Answer 3

我接受你的挑战，但完成后我意识到你说的是JQuery，这个解决方案只是Javascript。

查看我的解决方案: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);

Answer 4

你可以这么做…
使用Array.reduce()

const
alphabet = ' abcdefghijklmnopqrstuvwxyz'
, result =
Array
.from(document.querySelectorAll('.foo'))
.reduce( (res,e) => 
{
res[e.textContent] = 
[...e.dataset.widget]
.reduce( (r,c) =>
(r[c] = alphabet.indexOf(c).toString(10), r )
,{})
return res
},{})

const // show result
rpl  = [[`"`,`'`],[`}`,` }`],[`{`,`{ `],[`:`,`: `],[`},`,`}n,`],[`,`,`, `],[`} }`,`}n}`]]
, clog = s => rpl.reduce((r,[x,y])=>r.replaceAll(x,y),s)
console.log( clog(JSON.stringify(result)) )

.as-console-wrapper { max-height: 100% !important; top: 0 }

<div class="foo" data-widget="bar">This</div>
<div class="foo" data-widget="baz">That</div>