如何将 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

因为您已经在使用 jquery，我建议 .prevAll()

我不是在测试这个，但它可能看起来像：

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

Answer 2

这应该可以为您提供解决方案

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

工作fiddle https://jsfiddle.net/xq44f1xa/

Answer 3

您可以使用 prevAll() jquery 方法 - 要包含 单击的 也可以使用 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 4

这项工作很好 source，在浏览器中打开开发者模式以显示 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)
})

如何将 html 标记的一部分作为变量

How to get part of html markup as a variable

html

javascript

jquery

jquery-selectors