如何获取前面元素的html

Question

<span class='spanpath'>a</span>
<span class='spanpath'>b</span>
<span class='spanpath'>c</span>
<span class='spanpath'>d</span>
<span class='spanpath'>e</span>

js

$('.spanpath').click(function(){
var a = html of all preceding spans + html of clicked span
});

例如，如果单击spanpath c，结果应该是

<span class='spanpath'>a</span>
<span class='spanpath'>b</span>
<span class='spanpath'>c</span>

有什么帮助吗？

Answer 1

使用preveAll()获取之前的所有项，然后使用addBack()将项本身包含在对象中。

$('.spanpath').click(function(){
  var a = $(this).prevAll('.spanpath').addBack();
  console.log(a.clone().wrapAll('<p>').parent().html());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<span class='spanpath'>a</span>
<span class='spanpath'>b</span>
<span class='spanpath'>c</span>
<span class='spanpath'>d</span>
<span class='spanpath'>e</span>

Answer 2

试试这个：

prevAll将获得所有先前的.spanpath，然后您可以将其与单击的.spanpath 的html连接

$('.spanpath').click(function(){
var a = $(this).html();
  var b = '';
$(this).prevAll('.spanpath').each(function(){
 b = $(this).html() + " " + b;
  
});
var a = b + " " + a;
  alert(a);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class='spanpath'>a</span>
<span class='spanpath'>b</span>
<span class='spanpath'>c</span>
<span class='spanpath'>d</span>
<span class='spanpath'>e</span>

Answer 3

这样会更好，否则您将获得所有以前的HTML元素

$('.spanpath'(.click(function((｛

var a = $(this).prevAll(".spanpath").andSelf();

})；

Answer 4

您可以使用jQuery中的prevAll和andSelf方法选择所有需要的元素。然后对每个元素进行迭代，以获得这些元素中的html内容。

$(document).ready(function() {
  $('.spanpath').click(function() {
    var a = "";
    $(this).prevAll().andSelf().each(function() {
      a += $(this).html();
      });
    console.log(a);
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class='spanpath'>a</span>
<span class='spanpath'>b</span>
<span class='spanpath'>c</span>
<span class='spanpath'>d</span>
<span class='spanpath'>e</span>

注意

请注意，andSelf方法自jQuery版本1.8以来已弃用，并且将在版本3.0中删除。因此，建议使用addBack方法。