나는 HTML 마크 업의 일부 추출 할 필요가

Question

변수로 HTML 마크 업의 일부를 얻는 방법 : spant 셋째을 클릭하면,

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

을, 결과 해야한다 :

<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

prevAll() jquery method를 사용할 수 있으며 을 클릭하면도 사용됩니다. add(this)도 사용합니다.

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

이미 jQuery를 사용하고 있기 때문에, 나는이 테스트 아니에요 .prevAll()

좋을 것하지만 somethinglike 볼 수 있습니다

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

Answer 3

이 당신에게 솔루션을 제공한다을

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

이 작품 잘 source, 열린 개발자 모드 :

때 당신 map() 기능을 사용하여 spant를 클릭하면 마크 업의 목록을 얻을 경우 아래의 데모를 참조하십시오 브라우저에서 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) 
})