jQuery在普通父级中选择div

Question

Consider code:

<div class="wrapper">    
    <div class="target">        
        <div class="sub1">
            <span class="value">
                10
            </span>
        </div>            
        <div class="sub2">
            <button type="button">Trigger</button>
        </div>            
    </div>

    <div class="target">                
        <div class="sub1">
            <span class="value">
                20
            </span>
        </div>            
        <div class="sub2">
            <button type="button">Trigger</button>
        </div>            
    </div>    
</div>

How to select following value. If I click on 'button', I want jquery to select parent div class="target" and get span class="value" .text() .

The trick is to not select direct parent, but to be able to reach multiple level parent

Answer 1

You can do it like this:

$('button').on('click',function(){

  var text=$(this).closest('.target').find('.value').text();

});