CODEWITHSUNDEEP
jquery
InTheWorldOfCodingApplications
InTheWorldOfCodingApplications

Reputation: 2616

Selecting next Span with className with Jquery selector

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

Upvotes: 4

Views: 753

Answers (2)

Satpal
Satpal

Reputation: 133403

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')

Upvotes: 6

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

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.

Upvotes: 4

Related Questions