javascript - 获取 `li` 元素并将其插入对象

Question

我有一个简单的问题!

我有这个 html 和 js:

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

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

我想将所有 li 附加到 data 的 phrases 中以获得此输出:

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

我试试这个:

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

然后尝试push这个:

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

然后尝试扩展这个:

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()到对象中。
改用对属性的赋值:

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 is your object literal
[this.id] is your new object property, where this.id is the current li's ID
= txt; is where you assign to that property the value of the current li text

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

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