Question

我正在尝试为集合中的每个元素创建一个变量。我有这样的HTML结构：

<div id="notes">
    <p>Example Text 1</p>
    <p>Example Text 2</p>
    <p>Example Text 3</p>
</div>

我想将每个元素的文本存储在单独的变量中。在这种情况下，元素是动态生成的，因此有时会有2个元素，有时会有更多。

到目前为止，我已经尝试过：

var $counter= 0;
var variableNote = {};
$('#notes p').each(function(){
   $counter += 1;
   variableNote["newNote"+$counter] = $("#notes p").text();
   console.log(newNote1);
});

我做错了什么？

Answer 1

对象属性不是变量。要访问它们，您需要引用该对象。

此外，您没有在循环中使用迭代的当前元素。

var variableNote = {};

$('#notes p').each(function(index) {
    variableNote["newNote" + (index+1)] = $(this).text();
});

console.log(variableNote["newNote1"]);

Answer 2

var variableNote = {};
$('#notes p').each(
  (i,e) => variableNote["newNote" +(i+1)] = $(e).text()
);

console.log( variableNote );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="notes">
    <p>Example Text 1</p>
    <p>Example Text 2</p>
    <p>Example Text 3</p>
</div>

Answer 3

这可以通过找到元素并将它们简化为单个对象来实现。

//lookup the p tags, and reduce them to a single object
var variableNotes = $('#notes p').get().reduce(function(notes, note, index){
  notes['newNote'+ ++index] = note.innerText;
  return notes;
}, {});

console.log(variableNotes);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="notes">
    <p>Example Text 1</p>
    <p>Example Text 2</p>
    <p>Example Text 3</p>
</div>

Answer 4

可以使用香草javascript

var variableNotes = [...document.querySelectorAll("#notes p")].reduce((noteList, note, i)=>{
  noteList['newNote'+ (i +1)] = note.innerText;
  return noteList;
}, {});

console.log(variableNotes);

<div id="notes">
    <p>Example Text 1</p>
    <p>Example Text 2</p>
    <p>Example Text 3</p>
</div>

为每个元素的文本节点创建一个变量

4 个答案: