javascript - 如何使用 JavaScript 定位 <article> 中的特定元素？

Question

我需要使用js访问文本区域并在 Bootstrap 模式中填充输入字段。 我可以通过编写以下行来访问标题:

event.target.parentNode.parentNode.childNodes[1].textContent;

但是当涉及到帖子正文时，我无法在这一行访问它:

event.target.parentNode.parentNode.childNodes[2].textContent;

这是我正在使用的 html:

<article class="post col-md-6 ">
        <div class="media postforeach postborderleft">
            <div class="media-left media-top">

            </div>
            <div class="media-body">
                <header><h5 class="media-heading">{{ $post->title }}<i class="fa fa-angle-down pull-right " aria-hidden="true"></i></h5> </header>
                <p><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>

这是整个js代码:

$('.post').find('.edit').on('click',function(event) {
event.preventDefault();

var postTitle = event.target.parentNode.parentNode.childNodes[1].textContent;
var postBody = event.target.parentNode.parentNode.childNodes[2].textContent;
$('#post-title').val(postTitle);
$('#post-body').val(postBody);

$('#edit-model').modal();
});

非常感谢任何帮助。

Answer 1

这是由于 .media-body 的子节点之间有空格造成的，变成Text解析时 DOM 中的节点。

您应该使用其中之一

var postBody = event.target.parentNode.parentNode.children[1].textContent;

或

var postBody = event.target.parentNode.parentNode.childNodes[3].textContent;

或者更好的是，重写您的标记以获得正确的可选 {{ $post->body }}容器(例如，向 <p> 添加一个类)，并使用来自共同祖先(可能是 .media-body )的选择，而不是硬编码的节点遍历。

编辑: 另外，既然您已经在使用 jQuery，为什么不使用 jQuery 正确的 DOM 遍历语法:

var $mediaBody = $(this).parents('.media-body'),
    postTitle = $mediaBody.find('.media-heading').text(),
    postBody = $mediaBody.find('p:first').text();