遍历 HTML 内容和 return 值作为全局变量

Question

我想知道是否可以在 JavaScript 中动态创建 var 并将它们 return 放入全局变量中。示例：

<div id="parent">
  <span class="span_1">content</span>
  <span class="span_2">another</span>
  <span class="span_3">yup content</span>
</div>

和以下函数：

function getContent() {
  var divs = $('#parent').children('span').length;
  for(var i = 1; i < divs; i++) {
    jQuery('.span_'+i).html(); //this returned as global variables for each span
  }
}

如您所见，我想遍历跨度 HTML 并希望将每个跨度的内容变量作为全局变量。我该怎么做？

谢谢

Answer 1

您可以使用 jQuery map() 方法获取包含 span 元素内容的数组，如下所示：

var spanContents = $("#parent span").map(function(i, elm) {
  return $(elm).text(); // or html() if applicable
}).get();
console.log(spanContents);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <span class="span_1">content</span>
  <span class="span_2">another</span>
  <span class="span_3">yup content</span>
</div>

Answer 2

您可以这样使用.map()：

var globalVar; // javascript set the value as "undefined".

然后在你的函数中这样做：

function getContent() {
     globalVar = $('#parent span').map(function(){
                     return $(this).text();
                 }).get();

   //results in --> globalVar = ["content", "another", "yup content"]

}

.map() 使用您的选择器集合创建一个数组，并确保将其与 .get() 链接以获取数组中的集合。

Answer 3

除了遍历该循环（应该像 Jai 所说的那样从 1 开始），您还可以使用 "Attribute starts with" selector.

例如：

$('#parent span[class^="span_"])

将 return 一个数组，每个跨度在你的#parent 元素中具有 class 以 'span_' 开头。

遍历 HTML 内容和 return 值作为全局变量

Loop through HTML content and return values as global variables

html

javascript

jquery