Holen Sie `li` Elemente und schieben Sie es in Objekt

Question

Ich habe eine einfache Frage!

Ich habe diese html und js:

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

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

Ich möchte alle li im phrases von data anhängen für diese Ausgabe haben:

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

Ich versuche dies:

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

Und t diese ry push:

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

Und versuchen extend dies:

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

Aber funktioniert nicht!

Abgeschlossen Code:

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

Sehen Sie hier Online-Code: https://jsfiddle.net/NabiKAZ/fw63jd5k/

Answer 1

Sie sind ganz in der Nähe! Das Problem ist, dass der Punktoperator in JavaScript nicht verwendet werden kann, um einen Schlüssel auszuwerten und dann darauf zuzugreifen. Sie suchen nach dem Operator [], mit dem Sie alle in Klammern angegebenen Werte auswerten und dann den Wert als Schlüssel verwenden können. Also versuchen Sie folgendes:

Answer 2

Sie können nicht .push() in Objekt.
Verwenden Zuordnung zu Eigenschaften statt:

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 ist Ihr Objektliteral
[this.id] ist Ihre neue Objekteigenschaft, wo this.id die aktuellen li ‚s ID
= txt; ist wo Sie dieser Eigenschaft den Wert der aktuellenzuweisenText

Wie man es von oben herausfinden können, wenn Sie den gesamten HTML verwenden .html() statt wie benötigen:

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

Answer 3

Sie haben die richtige Idee, aber Sie sind nicht ganz richtig mit Ihren Funktionen. push ist eine Array-Methode, und extend ist keine native Methode. so, was wir gesetzt, um die ID auf den Schlüssel und den Wert auf die html

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

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