How to get part of html markup as a variable

Question

I need to extract part of html markup:

<div id='path'>
  <span class='spant' data-id=0>HOME</span>
  <span class='spant' data-id=5>HOME</span>
  <span class='spant' data-id=9>HOME</span>
  <span class='spant' data-id=14>HOME</span>
  <span class='spant' data-id=11>HOME</span>
</div>

JS

$(document).on('click', '.spant', function () {
  var a = ... // - html of all spant before clicked, including clicked one;
});

For example, if third spant is clicked, the result should be:

<span class='spant' data-id=0>HOME</span>
<span class='spant' data-id=5>HOME</span>
<span class='spant' data-id=9>HOME</span>

How can I do this ?

@Zakaria, you are wrong. This question has nothing common with the question you linked. — qadenza, Jan 12 '17 at 17:39
@bonaca, here is solution, quick and fast: https://jsfiddle.net/cj3L999o/ probably there are more elegant solutions, but this works, for sure. ;) Native JS helps, in cases like this... :) — sinisake, Jan 12 '17 at 17:56
@sinisake, it works. You should place your comment as answer. — qadenza, Jan 12 '17 at 18:06
@bonaca, nevermind, i couldn't, because question was closed, and now you already have (slightly better) answer from james bond. ;) — sinisake, Jan 12 '17 at 18:09
@sinisake, thanks a lot. Btw I suppose Zakaria closed this post, but it's not duplicated with the linked one. What can I do in this situation, when a moderator is wrong? — qadenza, Jan 12 '17 at 18:13

james_bond · Answer 1 · 2017-01-12T18:08:39.703

3

This should provide you a solution

$('.spant').on('click', function(e) {
    var string = "";
    var spans = $(this).prevAll().each(function(i, v){ string +=  v.outerHTML + "\n"; });
    string += this.outerHTML;
    alert(string);
});

Working fiddle https://jsfiddle.net/xq44f1xa/

edited Jan 12 '17 at 18:08

answered Jan 12 '17 at 17:57

james_bond

6,778
3
28
34

kukkuz · Accepted Answer · 2017-01-12T18:15:21.610

You can use prevAll() jquery method - and to include the clicked one use add(this) too.

See a demo below where you get the list of the markup when you click on the spant using a map() function:

$(document).on('click', '.spant', function() {
  var a = $(this).prevAll().add(this).map(function() {
    return $(this).get();
  }).get();
  console.log(a);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='path'>
  <span class='spant' data-id=0>HOME</span>
  <span class='spant' data-id=5>HOME</span>
  <span class='spant' data-id=9>HOME</span>
  <span class='spant' data-id=14>HOME</span>
  <span class='spant' data-id=11>HOME</span>
</div>

score 2 · Answer 3 · answered Jan 12 '17 at 17:34

2

Because you are already using jquery, I'd suggest .prevAll()

I'm not testing this, but it might look somethinglike:

$(document).on('click', '.spant', function () {
var a = $(this).prevAll().html() + $(this).html();
});

answered Jan 12 '17 at 17:34

TecBrat

3,643
3
28
45

@TecBrat, this will not work, test it... OP needs outerHTML, actually... – sinisake Jan 12 '17 at 17:45
1

@Landaida, please write your comment as answer, but clearly and tested before. – qadenza Jan 12 '17 at 18:03
1

@Landaida, it works. You should place your comment as answer. – qadenza Jan 12 '17 at 18:09

score 2 · Answer 4 · answered Jan 12 '17 at 18:15

this work fine source, open developer mode in your browser to show console.log results

$(document).on('click', '.spant', function(){
    let befores = $(this).prevAll()
    ,all = befores.add(this)
    let html = '';
    $(all).each((index, item)=>{ html += item.outerHTML +'\n' })
    console.log(html)
})

How to get part of html markup as a variable

4 Answers4