2016-08-05 5 views
2
<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> 

jsWie html vorhergehender Elemente

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

Zum Beispiel erhalten, wenn spanpath c geklickt wird, Ergebnis

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

Jede Hilfe sein sollte?

Antwort

2

Verwenden Sie preveAll(), um alle vorherigen Elemente abzurufen, und verwenden Sie dann addBack(), um das Element selbst in das Objekt aufzunehmen.

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

+1

Schön, ich würde nur andBack anstelle von andSelf (wie veraltet) vorschlagen – walmik

+0

@walmik Sie haben Recht. Es hat sich geändert. – RRK

+2

'andBack' oder' addBack'? – bonaca

1

Try this:

prevAll erhalten alle vorherigen .spanpath und dann können Sie das gleiche mit dem html des angeklickten .spanpath

$('.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>
verketten

0

Sie können alle gewünschten Elemente unter Verwendung der Methoden prevAll und andSelf in jQuery auswählen. Dann iteriere über jedes Element, um html Inhalt in diesen Elementen zu erhalten.

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

Hinweis

Bitte beachten Sie andSelf Methode deprecated seit jQuery Version 1.8 ist, und es wird 3.0 von Version entfernt werden. Daher wird empfohlen, stattdessen die Methode addBack zu verwenden.

1

Dies wird besser sein, sonst werden Sie alle i.Vj. HTML-Elemente

$ ('spanpath.') Erhalten klicken (function() {

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

}).