Question

我在更新帖子时遇到了问题，结果发现我的目标是错误的节点。这是我的html代码，我试图定位Id：

<article class="post col-md-6" data-postid="{{ $post->id }}"> <!-- this is what I need to target -->
          <div class="media postforeach postborderleft" >
               <div class="media-left media-top">

               </div>
              <div class="media-body">
                <header class="post-title"><h5 class="media-heading">{{ $post->title }}<i class="fa fa-angle-down pull-right " aria-hidden="true"></i></h5> </header>
                <p class="post-body"><i>{{ $post->body }}</i></p>
                <div class="info">
                    Posted by {{ $post->user->name }} on {{ $post->created_at }}
                </div>
              @if (Auth::check())
                <div class="interaction">
                      <a href="#" class="like">Like</a> |
                      <a href="#" class="like">Dislike</a>
                @if (Auth::user() == $post->user)
                        |
                      <a href="#" class="edit">Edit</a> |
                      <a href="{{ route('post.delete', ['post_id' => $post->id]) }}" class="like">Delete</a>
                 @endif
                </div>
              @else
                <a href="{{ route('registeration') }}" class="like" style="color: red">Login to interract with posts!</a>
              @endif
            </div>
        </div>
        <br>
    </article>

在代码顶部您可以看到<article class="post col-md-6" data-postid="{{ $post->id }}">这是我需要获取我的身份证的地方，而我尝试访问的代码是这样的：postId = event.target.parentNode.parentNode.dataset['postid'];我尝试了一些访问Id的更多内容，但我唯一能成功的方法是删除我的大部分HTML，而不是我可以轻松访问它，但这不是我想要的。我感谢任何帮助。

Answer 1

当您捕获锚点上的click事件时，容器文章是它的第4个父元素。要访问它（及其数据），您需要再添加.parentNode两次：

postId = event.target.parentNode.parentNode.parentNode.parentNode.dataset['postid'];

如果您正在使用jQuery，那么您可以做的最好是调用其closest方法以这种方式查找最近的文章（假设您正在观看锚点击事件）：

postId = $(this).closest('article').data('postid');

该方法确实遵循（我们确实需要）：

对于集合中的每个元素，获取与之匹配的第一个元素选择器通过测试元素本身并遍历其中 DOM树中的祖先。

Answer 2

我不确定您是否接受在项目中加入polyfill，但使用.closest方法可以很容易地解决这个问题。（polyfill不是100％必需，但浏览器支持还不完美，所以这取决于您的目标浏览器支持）

Polyfill here

现在可以使用.closest方法，可以使用以下方法：

var postId = event.target.closest('article.post').dataset['postid'];

如何在我的html代码

2 个答案: