如何将部分html标记作为变量答案

【问题标题】：How to get part of html markup as a variable如何将部分html标记作为变量
【发布时间】：2017-09-14 09:45:13
【问题描述】：

我需要提取部分 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>

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

我该怎么做？

【问题讨论】：

使用lt 选择器。 api.jquery.com/lt-selector
@Zakaria Acharki，这不是重复的，伙计...
@Zakaria，你错了。此问题与您链接的问题没有共同之处。
@bonaca，这是解决方案，快速而快速：jsfiddle.net/cj3L999o 可能还有更优雅的解决方案，但这肯定有效。 ;) 在这种情况下，本机 JS 会有所帮助... :)
@bonaca，没关系，我不能，因为问题已经结束，现在你已经从詹姆斯邦德那里得到了（稍微好一点的）答案。 ;)

标签： javascript jquery html jquery-selectors

【解决方案1】：

您可以使用 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>

【讨论】：

【解决方案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);
});

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

【讨论】：

【解决方案3】：

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

我没有对此进行测试，但它可能看起来像：

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

【讨论】：

@TecBrat，这行不通，测试一下……OP需要outerHTML，实际上……
@Landaida，请写下您的评论作为答案，但要清楚并经过测试。
@Landaida，它有效。您应该将您的评论作为答案。

【解决方案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)
})

【讨论】：