如何將html標記的一部分作為變量

Question

我需要提取部分html標記：

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

例如，如果單擊第三個spant ，結果應為：

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

我怎樣才能做到這一點 ？

Answer 1

這應該為您提供解決方案

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

工作小提琴https://jsfiddle.net/xq44f1xa/

Answer 2

您可以使用prevAll() jquery方法 - 並包含單擊的一個 use add(this) 。

請參閱下面的演示，當您使用map()函數單擊spant時，您將獲得標記列表：

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

Answer 3

因為你已經在使用jquery，我建議使用.prevAll()

我沒有測試這個，但它可能看起來像：

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

Answer 4

這項工作很好來源 ，開放的開發模式，在瀏覽器中顯示的console.log結果

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