Question

我有一个简单的问题！

我有html和js：

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

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

我想将所有li附加到phrases 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

你不能.push()进入对象请改为使用属性赋值：

＆＃13;

var data = {
  'language': 'fa',
  'phrases': {},
};

$("li").text(function(i, txt) {
  data.phrases[this.id] = txt;
});

$("#result").html(JSON.stringify( data ));

＆＃13;

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

＆＃13;

data.phrases是您的对象字面 [this.id]是您的新对象属性，其中this.id是当前li的ID = txt;是您为该属性指定当前li文本
的值的位置

从上面可以看出，如果您需要整个HTML使用.html()而不是：

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

Answer 2

你非常接近！问题是JavaScript中的点运算符不能用于评估密钥然后访问它。您正在寻找[]运算符，可用于评估括号中的任何内容，然后使用该值作为键。所以试试这个：

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

Answer 3

你有正确的想法，但你并没有正确使用你的功能。 push是一个数组方法，并且扩展只是一个本机方法。所以我们要做的是将id设置为键，将值设置为html

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

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

获取`li`元素并将其推入对象

3 个答案: