John John - 2 months ago 9
HTML Question

jQuery selection using 'this' on a button

I have 5 divs, with all of them have 5 texts inside

<div class="text">
<%= theComment.text %>
</div>


im using nodejs, mongodb and mongoose.

and i have a button called EDIT with a class of "editBTN"

i have my jQuery code:

$(".editBTN").click(function(){
console.log($(".text").text())
});


what i want is, everytime i clicked the edit button on one of the divs, it selects it's text message. what happening is, it selects all the text of all 5 divs. i just want to select the text div on where i only clicked the edit button.
Is this something to do with the "this" keyword? how can i put it on my jquery code.

This is my ejs code:

<% include partials/header %>
<div class="container" id="profileShow">
<div class="row">
<div class="col-md-3">

</div>
<div class="col-md-9">
<div class="thumbnail">
<div class="text-center"><h2><%= userID.name %></h2>

<img src="<%= userID.image %>">
<p><em>Submitted by: <strong><%= userID.author.username %></strong> </em></p>

</div>

<div style="text-align:center;">
<form action="/index/<%= userID._id%>/edit" method="GET" id="profileForm">
<% if(currentUser && userID.author.id.equals(currentUser._id)){ %>
<button class="ui grey button tiny">
<i class="configure icon"></i>
Edit profile
</button>
</form>
<form action="/index/<%= userID._id%>?_method=DELETE" method="POST" id="profileForm">
<button class="negative ui button tiny">
<i class="configure icon"></i>
Delete profile
</button>
<% } %>
</form>
</div>
</div>





<div class="well well-sm clearfix">


<div id="commentsDiv">
<h3 class="ui dividing header">Comments</h3>
</div>

<% userID.comments.forEach(function(theComment){ %>

<div class="ui comments">

<div class="comment">
<a class="avatar" href="/profile/<%= theComment.author.id %>">
<img src="<%= theComment.author.image %>">
</a>
<div class="content">

<a class="author" href="/profile/<%= theComment.author.id %>"><%= theComment.author.username%></a>
<div class="metadata">
<span class="date"><%= theComment.date %></span>
</div>
<div class="text">
<%= theComment.text %>
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
<div class="editdelete-inline">
<% if(currentUser && theComment.author.id.equals(currentUser._id)){ %>
<form action="/index/<%= userID._id %>/comments/<%= theComment._id %>?_method=DELETE" method="POST"><button class="mini ui red button" >Delete</button></form>
<button class="mini ui orange button editBTN">Edit</button>
<% } %>
</div>
</div>
</div>
</div>
<% }); %>



<% if(currentUser){ %>
<form action="/index/<%= userID._id %>/comments" method="POST">
<div class="ui fluid action input">
<input type="text" class="form-control" name="comment[text]" placeholder="Add comment..." >
<button class="btn btn-primary btn-xs">
Send<i class="send icon"></i>
</button>
</div>
</form>
<% } else { %>
<div class="alert alert-danger" role="alert">Login / Register to submit a comment</div>
<% } %>
</div>
</div>
</div>
</div>




<% include partials/footer %>


Thank you!

Answer

I would do something similar with the people that answered before me but using .closest. If the edit button is inside a .content div all the time then I something like the following will work:

$(".editBTN").click(function(){  
  var $text = $(this).closest('.content').find('text');
  console.log($text.text());
});

I think .closest() is the safest option when it comes to markup changes. Cause .parent().parent() assumes a lot about your HTML structure and will break if you add more inner divs and .parents() will loop through all ancestors and filter them based on the selector so it seems like a lot of extra work to get the result you want.

Comments