JQUERY -获取指定类的p标记文本，并将其放在text区域中。

Question

我有一个小项目，在这个项目中，用户可以写帖子，也可以对这些帖子发表评论。在评论中，每个评论都有一个编辑或删除评论的菜单。如果用户想编辑他的评论，他点击菜单项，其中菜单项有edit-comment类，有注释的p标记，有注释的cmnt标记，应该作为textarea的值插入post-comment-input类，现在有很多帖子和评论，我搞不懂该怎么做。我将在其内容中提供该帖子的结构。

​

$('.edit-comment').click(function(){
// Here the process 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel panel-default" post-id="52" user-id="1">
  <div class="panel-body">
    <section class="post-heading">
      <div class="row">
        <div class="col-xs-10 col-sm-10 col-md-10">
          <div class="media">
            <div class="media-left">
              <a href="profile3.php?do=Timeline"><img src="Uploads\Profiles\1184751002_32472098_559223424460568_5118633382175047680_n.jpg" class="media-object photo-profile img-circle" alt="user image" width="50" height="50"></a>

            </div>
            <div class="media-body">
              <a href="profile3.php?do=Timeline" class="anchor-username">
                <h4 class="media-heading">Mouad Raizada</h4>
              </a>
              <p class="anchor-time">14 Oct at 2:07am</p>
            </div>
          </div>
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 drop">
          <a href=""><i class="fa fa-ellipsis-v post-drop"></i></a>
          <div class="drop-content">
            <ul class="post-menu">
              <li class="edit-post"><a href="edit-post.php?postid=52">Edit post</a></li>
              <li class="delete-post">Delete post</li>
              <li class="save-post">Save post</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
    <section class="post-body">
      <p dir="auto">Here is a post</p>
    </section>
    <section class="post-cats">
      <p>Post tag(s)</p>
      <span class="post-cat-tag">Appliances</span>
    </section>
    <section class="post-footer">
      <div class="post-footer-option container">
        <ul class="list-unstyled">
          <li class="not-liked-item"><i class="glyphicon glyphicon-thumbs-up post-like not-liked"></i> Like</li>
          <li class="comment-item"><i class="glyphicon glyphicon-comment post-comment"></i> Comment</li>
        </ul>
      </div>
      <div class="post-footer-counting">
        <div class="likes">
          <i class="glyphicon glyphicon-thumbs-up liked-icon"></i>
          <span class="likes-count">1</span>
        </div>
        <div class="comments">
          <p class="comments-count">1 Comments</p>
        </div>
      </div>
      <div class="post-footer-comment-wrapper">
        <div class="comment-form">
          <div class="comment-form-user-pic">
            <img src="Uploads\Profiles\1184751002_32472098_559223424460568_5118633382175047680_n.jpg" class="media-object photo-profile img-circle" alt="user image" width="30" height="30">
          </div>
          <div class="comment-form-user-comment">
            <textarea class="post-comment-input" placeholder="Write a comment"></textarea>
            <p align="right" class="comment-btn">Comment</p>
          </div>
        </div>
        <div class="comment">
          <div class="media-comment" cmnt-id="18">
            <span class="caret comment-menu-icon"></span>
            <div class="comment-menu-container" style="display: none;">
              <ul class="comment-menu">
                <li class="edit-comment">Edit Comment</li>
                <li class="delete-comment">Delete Comment</li>
              </ul>
            </div>
            <div class="media-left">
              <a href="usersprofile.php?do=Timeline&amp;userid=1">
                <img src="Uploads\Profiles\1184751002_32472098_559223424460568_5118633382175047680_n.jpg" class="media-object photo-profile img-circle" alt="user image" width="40" height="40">
              </a>
            </div>
            <div class="media-body">
              <a href="usersprofile.php?do=Timeline&amp;userid=1" class="anchor-username">
                <h4 class="media-heading">Mouad Raizada</h4>
              </a>
              <p class="comment-stuff cmnt">hello</p>
              <p class="anchor-time comment-stuff">14 Oct at 2:07am</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>

​

Answer 1

试着这样做：

​

$('.edit').click(function(e) {
  var target = $(e.target),
    prevComment = target.parent().children().filter('p.comment'),
    commentText = prevComment.text();

  $('.commentArea').text(commentText);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="comment1">
  <p class="comment">Hello World</p>
  <button class="edit">edit</button>
</div>

<div id="comment2">
  <p class="comment">Hello World 123</p>
  <button class="edit">edit</button>
</div>

<div id="comment3">
  <p class="comment">Hello World 456</p>
  <button class="edit">edit</button>
</div>

<br>
<textarea class="commentArea"></textarea>

​

这里是jsfiddle：http://jsfiddle.net/xpvt214o/883318/

希望这能有所帮助。

Answer 2

获取一个相关的引用并将其放在编辑中。

​

$('.post-footer-comment-wrapper').on('click', '.edit-comment', function(event) {
  var wrapper = $(event.delegateTarget);
  var editField = wrapper.find('.post-comment-input');
  editField.val(wrapper.find('.cmnt').text());
});

$('.comment-menu-container').show();//just to show the dang button

.edit-comment {
  border: solid 1px lime;
}

.comment {
  border: solid 1px cyan;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="panel panel-default" post-id="52" user-id="1">
  <div class="panel-body">
    <section class="post-heading">
      <div class="row">
        <div class="col-xs-10 col-sm-10 col-md-10">
          <div class="media">
            <div class="media-left">
              <a href="profile3.php?do=Timeline"><img src="Uploads\Profiles\1184751002_32472098_559223424460568_5118633382175047680_n.jpg" class="media-object photo-profile img-circle" alt="user image" width="50" height="50"></a>

            </div>
            <div class="media-body">
              <a href="profile3.php?do=Timeline" class="anchor-username">
                <h4 class="media-heading">Mouad Raizada</h4>
              </a>
              <p class="anchor-time">14 Oct at 2:07am</p>
            </div>
          </div>
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 drop">
          <a href=""><i class="fa fa-ellipsis-v post-drop"></i></a>
          <div class="drop-content">
            <ul class="post-menu">
              <li class="edit-post"><a href="edit-post.php?postid=52">Edit post</a></li>
              <li class="delete-post">Delete post</li>
              <li class="save-post">Save post</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
    <section class="post-body">
      <p dir="auto">Here is a post</p>
    </section>
    <section class="post-cats">
      <p>Post tag(s)</p>
      <span class="post-cat-tag">Appliances</span>
    </section>
    <section class="post-footer">
      <div class="post-footer-option container">
        <ul class="list-unstyled">
          <li class="not-liked-item"><i class="glyphicon glyphicon-thumbs-up post-like not-liked"></i> Like</li>
          <li class="comment-item"><i class="glyphicon glyphicon-comment post-comment"></i> Comment</li>
        </ul>
      </div>
      <div class="post-footer-counting">
        <div class="likes">
          <i class="glyphicon glyphicon-thumbs-up liked-icon"></i>
          <span class="likes-count">1</span>
        </div>
        <div class="comments">
          <p class="comments-count">1 Comments</p>
        </div>
      </div>
      <div class="post-footer-comment-wrapper">
        <div class="comment-form">
          <div class="comment-form-user-pic">
            <img src="Uploads\Profiles\1184751002_32472098_559223424460568_5118633382175047680_n.jpg" class="media-object photo-profile img-circle" alt="user image" width="30" height="30">
          </div>
          <div class="comment-form-user-comment">
            <textarea class="post-comment-input" placeholder="Write a comment"></textarea>
            <p align="right" class="comment-btn">Comment</p>
          </div>
        </div>
        <div class="comment">
          <div class="media-comment" cmnt-id="18">
            <span class="caret comment-menu-icon"></span>
            <div class="comment-menu-container" style="display: none;">
              <ul class="comment-menu">
                <li class="edit-comment">Edit Comment</li>
                <li class="delete-comment">Delete Comment</li>
              </ul>
            </div>
            <div class="media-left">
              <a href="usersprofile.php?do=Timeline&amp;userid=1">
                <img src="Uploads\Profiles\1184751002_32472098_559223424460568_5118633382175047680_n.jpg" class="media-object photo-profile img-circle" alt="user image" width="40" height="40">
              </a>
            </div>
            <div class="media-body">
              <a href="usersprofile.php?do=Timeline&amp;userid=1" class="anchor-username">
                <h4 class="media-heading">Mouad Raizada</h4>
              </a>
              <p class="comment-stuff cmnt">hello</p>
              <p class="anchor-time comment-stuff">14 Oct at 2:07am</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>

​