prevAll - 如何获取 html 而不是对象？答案

【问题标题】：prevAll - how to get html instead object?prevAll - 如何获取 html 而不是对象？
【发布时间】：2016-12-13 07:06:54
【问题描述】：

<span class='spant'>sky</span>
<span class='spant'>sea</span>
<span class='spant'>earth</span>
<span class='spant'>moon</span>

$(document).on('click', '.spant', function () {
    var a = $(this).prevAll('.spant').addBack();
    console.log(a);
    localStorage.setItem('path', a);
});

例如，单击跨度earth。
控制台结果：

[span.spant, prevObject: m.fn.init[0], context: span.spant]

本地存储结果：

[object Object]

我需要的是（控制台和本地存储）：

<span class='spant'>sky</span><span class='spant'>sea</span><span class='spant'>earth</span>

有什么帮助吗？

【问题讨论】：

标签： jquery console local-storage

【解决方案1】：

您可以使用Array#reduce 来创建匹配元素的outerHTML 字符串，或者使用get 从jQuery 对象中获取真正的数组：

var html = a.get().reduce(function(html, element) {
  return html + element.outerHTML;
}, "");

...或使用reduce on jQuery 对象：

var html = Array.prototype.reduce.call(a, function(html, element) {
  return html + element.outerHTML;
}, "");

第一个例子：

$(document).on('click', '.spant', function () {
    var a = $(this).prevAll('.spant').addBack();
    var html = a.get().reduce(function(html, element) {
      return html + element.outerHTML;
    }, "");
    console.log(html);
    //localStorage.setItem('path', html);
});

<span class='spant'>sky</span>
<span class='spant'>sea</span>
<span class='spant'>earth</span>
<span class='spant'>moon</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

或者如果你不想使用reduce，一个无聊的老循环：

var html = ""
a.each(function() {
  html += this.outerHTML;
});

例子：

$(document).on('click', '.spant', function () {
    var a = $(this).prevAll('.spant').addBack();
    var html = ""
    a.each(function() {
      html += this.outerHTML;
    });
    console.log(html);
    //localStorage.setItem('path', html);
});

<span class='spant'>sky</span>
<span class='spant'>sea</span>
<span class='spant'>earth</span>
<span class='spant'>moon</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

...我不禁注意到它更短且更易于理解。 ;-)

【讨论】：

T.J.你觉得 my answer 怎么样？
@Vixed：当然，您可以使用循环代替each。我强烈建议使用 Stack Snippets，而不是场外资源。
嗨@T.J.Crowder 这与这个问题无关，但你知道为什么.htaccess 文件在包含ErrorDocuments 中描述的某些ErrorDocuments 时会“破坏”吗？

【解决方案2】：

这似乎对我有用：

$(document).on('click', '.spant', function () {
    var a = $(this).prevAll('.spant').addBack();
    var b='';
    for (var i=0;i<a.length;i++)
      b=b+a[i].outerHTML;
    console.log(b);
    localStorage.setItem('path', b);
});

检查这个https://fiddle.jshell.net/sjdxofxj/

【讨论】：