Question

我有5个div，其中所有内容都有5个文本

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

我正在使用nodejs，mongodb和mongoose。

我有一个名为EDIT的按钮，其中包含“editBTN”类

我有我的jQuery代码：

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

我想要的是，每当我点击其中一个div上的编辑按钮时，它就会选择它的短信。发生了什么，它选择了所有5个div的所有文本。我只想选择文本div，我只点击了编辑按钮。这与“this”关键字有关吗？我怎么能把它放在我的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 %>

谢谢！

Answer 1

这是因为文本类应用于所有文本中，因此他们将全部选择。您可以在每个foreach中添加id，以便在之后单独识别它们，或者只是查找HTML结构：

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

Answer 2

试试这个：

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

外部jQuery调用的第二个参数表示搜索第一个参数表示的元素的元素。

Answer 3

我会和在我之前回答但是使用.closest的人做类似的事情。如果编辑按钮始终位于.content div中，那么我可以使用以下内容：

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

我认为.closest（）是标记更改最安全的选择。原因.parent（）。parent（）假设您的HTML结构很多，如果添加更多内部div将会中断.parents（）会循环遍历所有祖先并根据选择器过滤它们所以它看起来像是额外的努力获得你想要的结果。

在按钮上使用“this”进行jQuery选择

3 个答案: