如何从点击目标中获取上一个元素？

Question

Hello I have this html code:

<div class="row newrow">
        <div class="col-10"><b>this</b></div>
        <div class="col-2">
            <img src="close.png" id="exit"/>
        </div>
    </div>

When I click on img with id exit using this code

$('body').on('click','#exit',function(e){

})

I need to get the text of the <b> behind it which would be "this"

I have tried this but it does not work:

$('body').on('click','#exit',function(e){    
 $q = $(e.target).prev('b')
       var word = $q.text()
)}

It only gives me the that I clicked from the beginning

Answer 1

try this:

$('body').on('click','#exit',function(e){    
   var this_b = $(this).parent().prev().children(0).html();// get the text
   alert(this_b);
});

Answer 2

You can use $(this).closest('.row').find('b') :

 $('#exit').click(function(e){ $q = $(this).closest('.row').find('b'); var word = $q.text(); console.log(word); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row newrow"> <div class="col-10"><b>this</b></div> <div class="col-2"> <img src="close.png" id="exit"/> </div> </div> 

Answer 3

You need to select the parent of the clicked img to get the the .col-2 , and then get the col-2 's prev() to get to the .col-10 , and then you can access its children() to get the children (the single <b> ). Also, there's no need for e.target if you use this :

 $('body').on('click', '#exit', function() { $q = $(this).parent().prev().children(); var word = $q.text() console.log(word); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row newrow"> <div class="col-10"><b>this</b></div> <div class="col-2"> <img src="close.png" id="exit" /> </div> </div> 

Answer 4

Try this

$('body').on('click','#exit',function(e){    
 var word = $(this).closest('.newrow').find('b').text();
 });