prevAll - how to get html instead object?

Question

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

js

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

click on span earth, for example.
console result:

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

localStorage result:

[object Object]

What I need is (console and localStorage):

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

Any help?

score 2 · Accepted Answer · answered Aug 07 '16 at 11:04

You can use Array#reduce to create a string of the outerHTML of the matched elements, either using get to get a true array from the jQuery object:

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

...or by using reduce on the jQuery object:

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

Example of the first:

$(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>

Or if you don't want to use reduce, a boring old loop:

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

Example:

$(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>

...which I can't help but notice is both shorter and easier to understand. ;-)

T.J. what do you think about **[my answer](http://stackoverflow.com/a/38813672/1076753)**? — Vixed, Aug 07 '16 at 11:32
@Vixed: Sure, you can use a loop instead of `each`. I strongly suggest using Stack Snippets, not off-site resources. — T.J. Crowder, Aug 07 '16 at 11:37
Hi @T.J.Crowder This is unrelated to this question but do you know why the `.htaccess` file is "breaking" upon including certain `ErrorDocuments` as described in [this question](http://stackoverflow.com/questions/38811962/htaccess-breaks-upon-including-an-argument-for-http-451)? — Dan, Aug 07 '16 at 11:40

score 1 · Answer 2 · answered Aug 07 '16 at 11:30

This seems to work for me:

$(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);
});

Check this https://fiddle.jshell.net/sjdxofxj/

prevAll - how to get html instead object?

2 Answers2