我想遍历DOM,我无法访问数据

时间:2016-12-12 17:14:42

标签: javascript jquery

这是我的html代码,其中我尝试遍历DOM,基本上忽略了我点击编辑链接我希望能够遍历回到 {{$ post - > body}} 来访问它拥有的内容。

<div class="well imagess">
    <div class="row">
        <div class="col-md-1 col-sm-1 col-xs-1 col-lg-1 col-md-offset-0 col-sm-offset-0 col-lg-offset-0  col-xs-offset-0 ">
            <img src="images/female.png" style="height: 70px; width: 70px;">
        </div>
        <div class="col-md-10 col-sm-10 col-xs-10 col-lg-10 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-offset-1" style="margin-top: -15px;">
            <h5>{{ $post->title }}</h5>
            <br>
            <p style="margin-top: -15px;">Posted by - <b>{{ $post->user->first_name }} {{ $post->user->last_name }}</b> from <b>{{ $post->user->city }}, {{ $post->user->country }}</b></p>{{ $post->created_at }}
        </div>
    </div>
    <hr>
    <div class="row first">
        <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12" id="second">
            <p style="font-size: 15px;" id="post-body-edit">{{ $post->body }} </p>
        </div>
    </div>
    <div class="well wellcolor1">
        <div class="col-xs-2 col-sm-2">
            <a href="g1" style="margin-right: 70px;" title="Like"><span  style="color: blue;" class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span></a>
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 ">
            <a href="g2" style="margin-right: 400px;" title="Dislike"><span  style="color: blue;" class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span></a>
        </div>
        @if(Auth::user() == $post->user)
        <div class="col-xs-2 col-sm-2 col-lg-2 col-md-2 col-sm-offset-3 col-xs-offset-3 col-lg-offset-3 col-md-offset-3 edit-class">
            <a style="margin-right: 70px;" id="edit" href="#" title="Edit"><span style="color: green;" class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
        </div>
        <div class="col-xs-2 col-sm-2 col-lg-2 col-md-2">
            <a href="{{ route('posts.delete', ['id' => $post->id]) }}" title="Delete"><span style="color: red;" class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
        </div>
        @endif
        <br>
        <div class="3">
            <a href="#" class="btn btn-default" style="margin-top: 20px;" role="button">Comments</a>
        </div>
    </div>

然后是javascript代码

$('.wellcolor1').find('.edit-class').find('#edit').on('click', function(event){

    event.preventDefault();
     var postBody = event.target.parentNode.parentNode.previousSibling.firstChild.childNodes[1].textContent;

    $('#post-body').val(postBody);  

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

我想将 {{$ post-&gt; body}} 内容纳入模式中,我主要关心的是如何遍历dom ...

1 个答案:

答案 0 :(得分:0)

我打算在这里走出去,猜测你的意思是遍历DOM。在这种情况下,请使用:https://api.jquery.com/closest/

相关问题