How to pick up element above Jquery?

Question

I have the following elements:

<p class="id-task">5</p>
<p class="status-change">
    <i id="test-task" class="fa fa-flask fa-lg" aria-hidden="true"></i> 
</p>

I’m trying to get number 5 in <p class="id-task">5</p> with the following Jquery code:

$('#test-task').on('click', function(){ 
    var father = $(this).parent().siblings();
    var idTask = $(father).text();
    alert(idTask);  
});

I changed the code, because the parent() end has to be .siblings(), because the <p class="id-task">5</p> is the brother of <p class="status-change"></p>

Answer 1

the Prev() method returns the previous widget.

$('#test-task').on('click', function(){ 
    var element = $(this).parent().prev();
    var idTask = $(element).text();
    alert(idTask);  
});

Answer 2

Change to $(father).text();, you’re getting all the html.

$('#test-task').on('click', function(){ 
    var father = $(this).parent().parent();
    var idTask = $(father).text();
    alert(idTask);  
});

Answer 3

Just take it for the class.

$('.id-task').text();

JS

$('#test-task').on('click', function(){ 
    var idTask = $('.id-task').text();
    alert(idTask);  
});

Answer 4

Use the function .prev()

.prev() always brings the previous element

In case your click event calls an element inside a paragraph if you want one above where it is. Do so:

$('#test-task').on('click', function(){ 
    var idTask = $(this).parent().prev().text();
    alert(idTask);  
});