jQueryselect在button上使用“this”
我有5个div，里面全部有5个文字
<div class="text"> <%= theComment.text %> </div> 即时通讯使用nodejs，mongodb和mongoose。
我有一个名为EDIT的button“editBTN”
我有我的jQuery代码：
$(".editBTN").click(function(){ console.log($(".text").text()) });
我想要的是，每次我点击其中一个div的编辑button，它会select它的文本消息。 发生了什么事情，它select所有5个div的所有文本。 我只想select文本div在哪里我只点击编辑button。 这是关于“这个”关键字？ 我怎么能把它放在我的jQuery代码。
这是我的ejs代码：
<% 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 %>
谢谢！
我会做一些类似于之前回答的人，但使用.closest。 如果编辑button始终位于.content div中，那么下面的代码就可以工作：
$(".editBTN").click(function(){ var $text = $(this).closest('.content').find('text'); console.log($text.text()); });
我认为.closest（）是标记更改最安全的选项。 原因.parent（）。parent（）假设你的HTML结构很多，如果你添加更多的内部div，.parents（）将循环遍历所有的祖先，并根据select器过滤它们，所以它看起来像很多额外努力得到你想要的结果。
发生这种情况是因为文本类被应用在所有的文本中，所以他们将全部选中。 您可以在每个foreach中添加id，单独标识它们，或者查找HTML结构：
$(".editBTN").click(function(){ var $text = $(this).parents('.content').find('.text'); console.log($text.text()); });
尝试这个：
$(".editBTN").click(function(){ console.log($(".text", $(this).parent().parent()).text()) });
外部jQuery调用的第二个参数表示要在其中search由第一个参数表示的元素的元素。