获取‘it’元素并将其推入对象

Question

我有个简单的问题！

我有这个html和js

<ul>
  <li id="x">foo</li>
  <li id="y">bar</li>
</ul>

var data = {
  'language': 'fa',
  'phrases': {},
};

我希望将所有li添加到phrases of data中，以获得以下输出：

{"language":"fa","phrases":{"x":"foo","y":"bar"}}

我试试看：

data.phrases.$(this).attr('id') = $(this).html();

并尝试push如下：

data.phrases.push( {$(this).attr('id') : $(this).html()} );

并尝试extend如下：

data.phrases.extend( {$(this).attr('id') : $(this).html()} );

但不管用！

已完成的代码：

<ul>
  <li id="x">foo</li>
  <li id="y">bar</li>
</ul>

<div id="result"></div>

var data = {
  'language': 'fa',
  'phrases': {},
};

//I want to append all `li` in the `phrases` of `data` for have this output:
//{"language":"fa","phrases":{"x":"foo","y":"bar"}}
$("li").each(function() {
  //data.phrases.$(this).attr('id') = $(this).html();
  //data.phrases.push( {$(this).attr('id') : $(this).html()} );
  //data.phrases.extend( {$(this).attr('id') : $(this).html()} );
});

$("#result").html(JSON.stringify( data ));

参见这里的在线代码：https://jsfiddle.net/NabiKAZ/fw63jd5k/

Answer 1

你离我很近！问题是JavaScript中的点运算符不能用于计算键然后访问它。您正在寻找运算符，它可以用于计算括号中的任何内容，然后使用该值作为键。所以试试这个：

data.phrases[$(this).attr('id')] = $(this).html();

Answer 2

不能将.push()转换为对象。

使用属性赋值代替：

​

var data = {
  'language': 'fa',
  'phrases': {},
};

$("li").text(function(i, txt) {
  data.phrases[this.id] = txt;
});

$("#result").html(JSON.stringify( data ));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li id="x">foo</li>
  <li id="y">bar</li>
</ul>

<div id="result"></div>

​

data.phrases是您的对象文本 [this.id]是您的新对象属性，其中this.id是当前li的ID。 = txt;是将当前li文本的值分配给该属性的地方。

从上面可以看出，如果需要整个HTML，请使用.html()，如下所示：

$("li").html(function(i, html) {
  data.phrases[this.id] = html;
});

Answer 3

您有正确的想法，但您并没有完全正确地使用您的函数。push是一种数组方法，而extend只是一个本机方法。因此，我们要做的是将id设置为键，将值设置为html。

https://jsfiddle.net/fw63jd5k/2/

$("li").each(function(i, el) {
  data.phrases[el.id] = $(el).html()
}