Selecting next Span with className with Jquery selector

Question

Struggling with Jquery selector to select

<span class='textContent'> 

when 'edit_click' class is clicked. Any help would be highly appreciated.

<span>
    <i class='fa fa-pencil edit_click'></i>
</span>
<span class='textContent'>Hello</span>

Javascript event handler

$('.edit_click').click(function (e) {
    $(this).next('span.textContent').attr('contenteditable', 'true');
    e.preventDefault();
});

Answer 1

You need to use .parent() to get the reference of parent span, then .next() can be used on span to target immediately following sibling.

$(this).parent().next('span.textContent')

Answer 2

Try to use the closest() function at this context to select the parent span element of i. After that use .next() since span.textContent is a sibling to the element which was previously selected with closest,

$('.edit_click').click(function (e) {
   $(this).closest('span').next(".textContent").attr('contenteditable', 'true');
});

And using e.preventDefault is pointless here as you bound event over an i tag, since it doesn't have any built in functionality with it.